別のボタンが表示されているときにボタンの位置が変わる

Question

通常はこれは問題ではありませんが、.center-leftクラスを追加して以来、2番目のボタンが表示されたときに最初のボタン（次）の位置が移動します。それはセンター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>

Answer 2

Position absoluteそれはあなたのコードであるためtransform: translate(50%,100%);のですが、すべての問題が発生しないことを削除し、それが正常に動作します。

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