Z-index doesn't work on pseudo-element ::before

Question

I want to create before to my .header-search and i can't change the z-index of before. Here's code:

.header-search {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 54px;
}

.header-search::before {
  content: '';
  width: 100vw;
  height: 54px;
  position: absolute;
  top: 0;
  left: 0;
  background: #f90;
  z-index: -1;
}

<div class="header-search"></div>

Can you give me a little more explanation of what you want to do? — sanriot, Mar 07 '20 at 18:14
That's because of your `header-search` which has a `position: fixed`. You need to change the `before` position or `.header-search` to make it work. — Alireza HI, Mar 07 '20 at 18:24
Does this answer your question? [Why can't an element with a z-index value cover its child?](https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child) — JHeth, Mar 07 '20 at 18:25
refer to the last part of the accepted answer to find your answer (the first part will give a *long* explanation about how it should work) — Temani Afif, Mar 07 '20 at 22:20
@TemaniAfif the duplicate doesn't explain why background of a pseudo with a negative z-index covers the background of its fixed parent but not the content. I only found a way to overide this funny side effect with the 3d transform, but never found any reference telling why this happens . jsfiddle with ops code but with content not hidden inside the fixed element https://jsfiddle.net/p08h7aov/ . that's the funny part, the pseudo stands in between bg and content ... *IE11 hides it behind though* — G-Cyrillus, Mar 08 '20 at 00:53
@G-Cyrillus it's because position:fixed create a stacking context so everything is painting inside and the background of the main element (the position:fixed) is always the bottom layer. So the background then negative z-index element then auto z-index element then positive z-index element. This is actually covered in the duplicate in the part where I am listing all the property that create stacking context and in the first part I am explaining why such behavior when we have stacking context. — Temani Afif, Mar 08 '20 at 01:00
@G-Cyrillus it's the painting order: https://www.w3.org/TR/css-position-3/#painting-order ... background is painted in the step (2) and in the step (3) element with negative z-index and the content is painted somehwere in the step (7) — Temani Afif, Mar 08 '20 at 01:02
@TemaniAfif it is still not clear to me . the pseudo is drawn from the fixed element itself and should be able to be drawn behind with a negative z-index. — G-Cyrillus, Mar 08 '20 at 01:02
@TemaniAfif so you mean a fixed element background is the deepest(furthest) level nd that anything else can only be drawn on top of it no matter the z-index and child relation ship it has ? — G-Cyrillus, Mar 08 '20 at 01:06
@G-Cyrillus if an element create a stacking context all the negative z-index inside it are *trapped* inside: *Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context* ... so it cannot be behind, because behind mean *outside of it* and it means painted before the main element which mean doesn't belong to that stacking context. — Temani Afif, Mar 08 '20 at 01:06
so, if i get it, the only possibility is to create a 3d context to override this for a fixed element , so i should not consider this as a trick ... ;) thanks for your time. — G-Cyrillus, Mar 08 '20 at 01:08
@G-Cyrillus exactly, like I explained in the duplicate there is no *way* to make the element behind and the only trick is a 3D context to *hack* it. This is not only the case of position:fixed but to any property that create a stacking context (position:relative with z-index, transform, opacity, etc) — Temani Afif, Mar 08 '20 at 01:10

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

to keep position:fixed, you may look at transform-style :

example , 10px lower , so you can see it.

.header-search {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 54px;
  transform-style: preserve-3d;
}

.header-search::before {
  transform-origin: 0 0;
  transform: rotatey(1deg);
  content: '';
  width: 100vw;
  height: 54px;
  position: absolute;
  top: 0;
  top:10px;/* see me demo */
  left: 0;
  background: #f90;
}

 
body {
  background: gray;

<div class="header-search">search header</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

also

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

Z-index doesn't work on pseudo-element ::before

1 Answers1