button's position changing when another button is shown

Question

normally this isn't an issue, but since I've added the .center-left class the position of the first button (next) moves when the second button is shown. Is it because the center CSS is now applied to both buttons as a group instead of just the first button? How should I fix this?

 $('#btn-previous').hide() $('#btn-next').click(function () { $('#btn-previous').show(); }) 

 .center-left { position: absolute; top: 50%; left: 30%; transform: translate(50%,100%); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = 'center-left'> <input type="button" id='btn-next' value ="Next"> <input type="button" id='btn-previous' value ="Previous"> </div> 

Answer 1

This problem because of 'absolute' position of parent element. don't use 'absolute' position or if you are force, set with of parent element.

 $('#btn-previous').hide() $('#btn-next').click(function () { $('#btn-previous').show() }) 

 .center-left { transform: translate(50%,100%); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = 'center-left'> <input type="button" id='btn-next' value ="Next"> <input type="button" id='btn-previous' value ="Previous"> </div> 

Answer 2

Position absolute doesn't cause any issue, that's because of transform: translate(50%,100%); in your code remove that and that works fine.

.center-left {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(50%,100%);/*remove this*/  
}