Wie erreiche ich Inline-Block oben/unten links oder oben/unten rechts auf Position relativ oder irgendwo?

Question

Ich habe versucht, Schaltflächen innerhalb einer Position relativ Container zuweisen, aber wenn ich absolute Position auf Schaltflächen sie sind überlappend. Ich möchte meine Buttons oben/unten rechts oder oben/unten links vom Viereck auf Inline-Block positionieren oder irgendwo positionieren? Welche Position sollte ich verwenden oder wie kann ich erreichen? Da es die Schaltflächen für das soziale Netzwerk ist. So wie ich versuche, ein Zertifikat von Freecodecamp zu bekommen, und ich bin auf Kurs zufällig Generator. Dies ist mein Code:

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

So wie ich Position tun oder entwerfen Sie meine Knöpfe in der positioniert relativ Box? Soll ich das Thema absolut eins nach dem anderen positionieren? Ich denke, es ist unprofessionell und ich möchte meinen Code von seiner besten Seite sehen? Ich habe den Z-Index benutzt, aber sie überlappen sich immer noch.

Answer 1

Wenn Sie einen Container namens "Buttons" haben, machen Sie dies absolut und belassen Sie Ihre Button-Elemente mit der Standardposition. Wenn Sie die Klasse "button" haben, müssen Sie nicht 2 secunces wie # twitter.button, # facebook.twitter machen. Fiddle

.buttons{ 
    position:absolute; 
} 

Answer 2

die position:absolute entfernen und Schwimmer für die Tasten verwenden.

die CSS

Taste {float: left;}

Auch bestimmt z-Index, welche Elemente auf dem oberen Rand anderen zeigen. In diesem Fall würde der Z-Index auswählen, welcher Button über dem anderen angezeigt werden soll.

Answer 3

Sie haben Ihre Tasten innerhalb der div mit Klasse "Tasten", aber das div hat keine Höhe oder Breite, weil die Tasten absolute Position haben.

Daher wird jeder Knopf relativ zu den "Tasten" div bei (0,0) platziert.

Bewegen Sie die Knöpfe aus dem Behälter oder geben Sie dem Behälter etwas Breite und Höhe.