html - 使用CSS在2个部分中间的按钮

我有两个部分，我试着在中间放一个按钮。但是出了问题，我不知道是什么。代码如下：

<section style="background: #000; color: #FFF; position: relative; margin: 0; padding: 0; overflow: hidden;">
  <p>This is the content.</p>
  <div style="width: 80px; padding: 20px; display: table; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background:red">Button</div>
</section>

<section style="background: #444; color: #FFF; position: relative; margin: 0; padding: 0; overflow: hidden;">
  <p>This is another content.</p>
</section>

我试图将“z-index”属性设置为DIV样式，但它也不起作用。它削减和DIV留在后面的下一节。所以。。。我怎样才能把DIV带回到两个部分的前面？谢谢。

最佳答案

这是因为您已经将overflow: hidden;设置为容器，所以它会隐藏溢出它的任何内容，而不管位置属性如何。尽管我建议将样式设置放入一个CSS文件中，使其更易于管理，但还是将HTML改成这个格式。

<section style="background: #000;color: #FFF;position: relative;margin: 0;padding: 0;float: left;width: 100%;">
  <p>This is the content.</p>
  <div style="z-index: 9999;width: 80px;padding: 20px;display: table;position: absolute;bottom: 0;left: 50%;transform: translate(-50%, 50%);background:red;">Button</div>
</section>

<section style="background: #444;color: #FFF;position: relative;margin: 0;padding: 0;width: 100%;float: left;">
  <p>This is another content.</p>
</section>

我向两个容器元素添加了width: 100%;和float: left;，并从每个元素中删除了overflow: hidden;。此外，我还向按钮添加了一个z-index: 9999;。

关于html - 使用CSS在2个部分中间的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43355802/