如何在相對位置或任何位置的頂部/底部左側或頂部/底部右側實現內嵌塊？

我一直在嘗試在相對容器的位置上分配按鈕，但是當我在按鈕上進行絕對位置時，它們重疊。我想將我的按鈕放置在內嵌塊的正方形的頂部/右下方或頂部/左下方，或將它們放在任何位置？我應該使用什麼位置？我該如何實現？因爲它是社交網絡的按鈕。順便說一下，我試圖從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

所以，我該怎麼辦位置或設計位置相比箱內我的按鈕？我應該一個一個地定位主題嗎？我認爲這是不專業的，我想看看我的代碼最好？我對它們使用了z-index，但它們仍然重疊。

來源

2016-05-13 Glendon Philipp Baculio

如果您有一個名爲「按鈕」的容器，請將其設置爲絕對值，並將按鈕元素保留爲默認位置。另外，如果你有班級「按鈕」，你不需要像＃twitter.button，＃facebook.twitter那樣製作2個secuences。 Fiddle

.buttons{ 
    position:absolute; 
}

來源

2016-05-13 21:34:29

那麼我該如何移動每一個如果我想把它們放在另一邊？對不起，我是新的 –

我剛剛爲你更新了小提琴。有很多方法可以做到這一點。 float，margin-left，translateX（），position：relative 即使使.buttons div爲flexbox，並給＃facebook-button一個margin-left：auto。 - 在小提琴URL中改變/ 4/for/5 /在顯示器上看到它：flex –

卸下position:absolute並使用浮子的按鈕。

的CSS

按鈕{浮動：左;}

此外，z索引確定哪些元素顯示在機頂他人。所以在這種情況下，z-index會選擇哪個按鈕顯示在另一個之上。

來源

2016-05-13 21:39:24 TechTho

你有你的按鈕裏面的div類「按鈕」，但該div沒有任何高度或寬度，因爲按鈕具有絕對位置。

因此，每個按鈕都相對於（按鈕）div放在（0,0）。

將按鈕移出容器或給容器一些寬度和高度。

來源

2016-05-13 21:44:38 Buffalo

我該如何移動每個按鈕？也許一個小提琴會更清晰 –

如何在相對位置或任何位置的頂部/底部左側或頂部/底部右側實現內嵌塊？

回答

相關問題