CSSの2つのセクションの中央にあるボタン

Question

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>

私はDIVのスタイルで「Zインデックス」プロパティを置くことを試みたが、それはまた、うまくいきませんでした。それは切断され、DIVは次のセクションに戻ります。だから、どうすればDIVを両方のセクションの前に戻すことができますか？ありがとう。

Answer 1

コンテナには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>

Iは、両方のコンテナ要素にwidth: 100%;とfloat: left;を添加し、それぞれからoverflow: hidden;を削除しました。また、ボタンにz-index: 9999;を追加しました。