どのようにインラインブロックを位置の上または下の左または上/下の右または上の位置で達成するか？

Question

私はボタンを相対的なコンテナ内に配置しようとしていましたが、ボタン上で絶対位置を指定すると重なり合っています。インラインブロックの上/下、または四角の上/下にボタンを配置するか、どこにでも配置したいのですか？どのポジションを使用すべきか、またはどのように達成できますか？それはソーシャルネットワークのボタンなので、私はfreecodecampから証明書を取得しようとしています。私は無作為な引用符ジェネレータを使っています。これは私のコードです：

HTML

</div> 

<div class="buttons"> 

<button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet 
    <i class="fa fa-twitter"></i> 
</a></button> 

<button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share 
    <i class="fa fa-facebook"></i> 
</a></button> 

</div> 

</div> 

SCSS

.quote-box { 
text-align: center; 
position: relative; 
border-radius: 4.5px; 
border: solid black 1px; 
display: table; 
width: 50%; 
height: 500px; 
padding: 10%; 
margin: 10% auto auto auto; /* center the box */ 
} 
.quote-box .buttons .button#twitter-button, .quote-box .buttons .button#facebook-button { 
top: 0; 
left:0; 
position:absolute;/* out of the document flow and you can move*/ 
float: left; 
margin: 1%; 
padding: 1%; 
display: inline-block; 
} 

JsFiddle JsFiddle

それでは、どのように私は位置の相対箱の中に私のボタンを配置したり設計していますか？私はちょうど1つずつテーマを絶対に置くべきですか？私は専門家ではないと思うし、自分のコードを最善に見たいと思っていますか？私はz-indexを使っていましたが、まだ重複しています。

Answer 1

「ボタン」というコンテナがある場合は、これを絶対にして、ボタンの要素をデフォルトのままにします。また、クラス "ボタン"を持っている場合、＃twitter.button、＃facebook.twitterのように2つのsecuenceを作る必要はありません。 Fiddle

.buttons{ 
    position:absolute; 
} 

Answer 2

position:absoluteを外し、ボタンのfloatを使用しています。

CSS

ボタン{フロート：左;}

また、z屈折率は、上にトップ他の示した要素を決定します。この場合、z-indexはどちらのボタンの上に表示するかを選択します。

Answer 3

ボタンのdiv内にはクラス "ボタン"がありますが、divは絶対位置のため高さや幅がありません。

したがって、各ボタンは、（0,0）の「ボタン」divを基準に配置されます。

ボタンをコンテナから移動するか、コンテナにある程度の幅と高さを与えます。