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个secuences。 Fiddle

.buttons{
    position:absolute;
}

Answer 2

删除position:absolute并使用float作为按钮。

CSS

按钮{float：left;}

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

Answer 3

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

因此，每个按钮相对于“按钮”div放置在（0,0）。

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

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

3 个答案: