如何在相对位置或任何地方实现左上/左下或右上/右下的内联块？

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

那么如何在定位的相对框内定位或设计我的按钮？我应该一个一个地定位绝对主题吗？我认为这是不专业的，我想以最好的方式查看我的代码？我在它们上使用了 z-index，但它们仍然重叠。

Answer 1

如果您有一个名为“Buttons”的容器，请将其设为绝对，并将您的按钮元素保留为默认位置。此外，如果你有类“按钮”，你不需要像#twitter.button、#facebook.twitter 这样的 2 个安全。 Fiddle

.buttons{
    position:absolute;
}

Answer 2

删除position:absolute 并为按钮使用浮动。

CSS

按钮 {float:left;}

此外，z-index 确定哪些元素显示在其他元素之上。所以在这种情况下，z-index 会选择将哪个按钮显示在另一个之上。

Answer 3

您的按钮位于 div 中，类为“buttons”，但该 div 没有任何高度或宽度，因为按钮具有绝对位置。

因此，每个按钮都相对于 (0,0) 处的“按钮”div 放置。

将按钮移出容器或给容器一些宽度和高度。