如何在相对位置或任何位置的顶部/底部左侧或顶部/底部右侧实现内嵌块？

问题描述：

我一直在尝试在相对容器的位置上分配按钮，但是当我在按钮上进行绝对位置时，它们重叠。我想将我的按钮放置在内嵌块的正方形的顶部/右下方或顶部/左下方，或将它们放在任何位置？我应该使用什么位置？我该如何实现？因为它是社交网络的按钮。顺便说一下，我试图从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，但它们仍然重叠。

答

如果您有一个名为“按钮”的容器，请将其设置为绝对值，并将按钮元素保留为默认位置。另外，如果你有班级“按钮”，你不需要像＃twitter.button，＃facebook.twitter那样制作2个secuences。 Fiddle

.buttons{ 
    position:absolute; 
}

那么我该如何移动每一个如果我想把它们放在另一边？对不起，我是新的 –

我刚刚为你更新了小提琴。有很多方法可以做到这一点。 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会选择哪个按钮显示在另一个之上。

答

你有你的按钮里面的div类“按钮”，但该div没有任何高度或宽度，因为按钮具有绝对位置。

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

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

我该如何移动每个按钮？也许一个小提琴会更清晰 –

如何在相对位置或任何位置的顶部/底部左侧或顶部/底部右侧实现内嵌块？

相关推荐