javascript - 显示另一个按钮时按钮的位置发生变化

Question

通常这不是问题，但由于我添加了 .center-left 类，当显示第二个按钮时，第一个按钮(下一步)的位置会移动。是不是因为 center CSS 现在作为一个组应用于两个按钮而不是仅应用于第一个按钮？我应该如何解决这个问题？

 
$('#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

这个问题是因为父元素的“绝对”位置。不要使用“绝对”位置，或者如果你是强制的，请设置父元素。

 
$('#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>