Pseudo element behind its element, when both elements are fixed?

Question

Is it possible to use a before element for an overlay background on a nav, like this?

.nav {
  background: white;
  position: fixed;
}

.nav::before {
  content: '';
  background: black;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<nav class="nav">
  Nav content
</nav>

The issue I have is that the black overlay sits above the white nav, yet I want it behind? How can this be fixed?

Could you provide an example to what you would want to achieve (desired result) so that we can better understand how to help you? Thanks! — Kyriakos Bekas, May 25 '23 at 09:04
You can use `z-index`. Simply adding `z-index: -1` will make the main div show on top in your example — Randommm, May 25 '23 at 09:05
@panthro read the duplicate until the end to find the 3D solution (that's your only way to solve this case) — Temani Afif, May 25 '23 at 09:18

score 1 · Answer 1 · answered May 25 '23 at 09:08

This can easily be achieved with isolation: isolate along with a suitable positioning and z-index on the pseudo-element:

.nav {
  /* to have the text stand out clearly */
  color: #fff;
  /* an easily-seen background for contrast
     in the demo: */
  background: #f00;
  /* just to better illustrate: */
  padding: 1rem;
  /* in order that the descendant pseudo-element
     is positioned in relation to this one:*/
  position: relative;
  /* to contain the stacking within the element,
     so that z-index: -1 on the pseudo-element
     doesn't place that pseudo-element behind
     its parent: */
  isolation: isolate;
}

.nav::before {
  content: '';
  /* for easy contrast for demonstration: */
  background-image: linear-gradient(90deg, transparent, black);
  /* in order to move the element out of
     the document flow, and to be positioned: */
  position: absolute;
  /* using 'inset' in place of 'top','right', 'bottom'
     and 'left': */
  inset: 0;
  z-index: -1;
}

<nav class="nav">
  Nav content
</nav>

score -2 · Answer 2 · answered May 25 '23 at 09:06

-2

Try to use z-index, i hope that its help you :)

.nav {
      background: white;
          z-index:1;
}

.nav::before {
    content:"";
    background: black;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index:-1;
}

<nav class="nav">
    Nav content
</nav>

answered May 25 '23 at 09:06

Yarin Levi

201
1
10

no need z-index for nav – Temani Afif May 25 '23 at 09:07
@panthro it works as you described in the snippet, does it not? If it does not work in your case then you have not provided enough details of your version for us to fix it – Randommm May 25 '23 at 09:10
This does not work, the nav element is also fixed. – panthro May 25 '23 at 09:12

Pseudo element behind its element, when both elements are fixed?

2 Answers2