Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2022-12-08 13:16:56
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
CSS: :before and z-index
hi css gurus!
please check a content-3 section (after header).
why the hell
.flexbox-1:before {
background-color:#f3f3f3;
content: ' ';
right:-150px;
top: -30px;
width: 750px;
height:calc(100% + 60px);
position: absolute;
z-index:-10;
} not going behind <div class="flexbox-1"></div> ?
it’s nicely behind <div class="flexbox-2"></div> ,which shares the same CSS attributes with <div class="flexbox-1"></div>
my head is blowing…
Last edited by Gallex (2022-12-08 13:47:34)
Offline
Offline
Re: CSS: :before and z-index
Your .flexbox-1::before is a child of the relative positioned .flexbox-1 while .flexbox-2 is a sibling of .flexbox-1. .flexbox-1::before sits on top of the background of its parent (.flexbox-1), which is the only ”content“ of the element. If you insert that image as an <img src="…" alt="…" /> then yes the image will sit on top of that generated content.
IOW, as siblings .flexbox-1 and .flexbox-2 sit on the same stacking context, and .flexbox-2 being the second in the code order will sit automatically on top .flexbox-1 and its content. On the other hand, .flexbox-1 generates a new stacking context. .flexbox-1::before is trapped within that.
Clear as mud? I made this little example that may help clarify this. View source, play around through the developper tools.Have fun.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
#4 2022-12-09 08:52:31
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
Re: CSS: :before and z-index
phiw13 wrote #334251:
If you insert that image as an
<img src="…" alt="…" />then yes the image will sit on top of that generated content.
went that way. thanks for the lesson! ;)
Offline