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>
      

Run codeHide result


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.

+3


source to share


1 answer


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>
      

Run codeHide result


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.

+3


source







All Articles