Question

通常这不是问题，但是因为我添加了.center-left类，所以当显示第二个按钮时，第一个按钮（下一个）的位置会移动。是因为中心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

这个问题是因为绝对的＆＃39;父元素的位置。不要使用绝对的＆＃39;位置或如果你是强制，用父元素设置。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Position absolute不会导致任何问题，因为代码中的transform: translate(50%,100%);会删除该问题，而且工作正常。

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

当显示另一个按钮时，按钮的位置会发生变化

2 个答案: