Button in the middle of two sections with CSS
I have 2 sections and I am trying to put a button in the middle of them. But something is going wrong, and I don't know what it is. Here is the code:
<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>
I tried to put the "z-index" property in a DIV style, but it also didn't work. It is cut and the DIV is left out of the way for the next section. So ... how can I get the DIV back in front of both sections? Thank.
source to share
This is because you have set overflow: hidden;
in containers to hide anything that overflows it regardless of the position attributes. Change your HTML to this, although I would suggest putting the style in a CSS file to make it easier to manage.
<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 added tags width: 100%;
and float: left;
for both container elements and removed overflow: hidden;
from each. Also, I added a button z-index: 9999;
to the button.
source to share