Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#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

#2 2022-12-08 18:24:04

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,094
Website Mastodon

Re: CSS: :before and z-index

Gallex wrote #334249:

hi css gurus!

please check a content-3 section (after header).

why the hell

indeed! What an enjoyable clean web page! I’m lovin’ the Eesti minimalist look.
Congratulations.


…. texted postive

Offline

#3 2022-12-09 00:29:22

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,225
Website

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

Board footer

Powered by FluxBB