z-index non funziona per elemento fisso

Question

stavo lavorando al mio codice, quando sono incappato in questo divertente fatto:

z-index non funziona per un elemento fisso e, quindi, elementi fissi saranno sempre davanti .

C'è un modo per posizionare un elemento non fisso davanti a un elemento fisso?

Grazie.

#fixed { 
 
    background-color: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: fixed; 
 
    z-index: 0; 
 
} 
 
#normal { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 500px; 
 
    z-index: 1; 
 
}

<div id = 'fixed'> I'm Fixed </div> 
 
<div id = 'normal'> I'm Normal </div>

Answer 1

A meno che non hai a che fare con gli elementi di flessione o elementi della griglia, un elemento deve essere posizionato per z-index al lavoro.

In altre parole, la proprietà position deve avere un valore diverso da static o z-index saranno ignorati.

Il tuo secondo div non è posizionato. Qui ci sono due opzioni:

• aggiungere position: relative-#normal, o
• dare al div posizionato un z-index valore negativo

#fixed { 
 
    background-color: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: fixed; 
 
    z-index: 0;     /* a negative value here will also work */ 
 
} 
 
#normal { 
 
    background-color: lightblue;  
 
    width: 500px; 
 
    height: 500px; 
 
    z-index: 1; 
 
    position: relative;   /* new */ 
 
}

<div id = 'fixed'> I'm Fixed </div> 
 
<div id = 'normal'> I'm Normal </div>

Vedi anche: Basics of the CSS z-index property

---

Sebbene z-index, come definito in CSS 2.1, si applica solo agli elementi posizionati, CSS 3 consente di lavorare con z-indexgrid items e flex items, anche quando è positionstatic.

z-index property page at MDN

Answer 2

Uso negativo z-index per l'elemento fisso.

<div id = 'fixed'> I'm Fixed </div> 
<div id = 'normal'> I'm Normal </div> 

#fixed { 
background-color: red; 
width: 500px; 
height: 500px; 
position: fixed; 
z-index: -1; 
} 
#normal { 
background-color: blue; 
width: 500px; 
height: 500px; 
z-index: 1; 
} 

Answer 3

#fixed { 
 
    background-color: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: fixed; 
 
    z-index: 0; 
 
} 
 
#normal { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 500px; 
 
    z-index: 1; 
 
position:relative; 
 
}

<div id = 'fixed'> I'm Fixed </div> 
 
<div id = 'normal'> I'm Normal </div>

#fixed { 
 
    background-color: red; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: fixed; 
 
    z-index: 0; 
 
} 
 
#normal { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 500px; 
 
    z-index: 1; 
 
position:relative; 
 
}

<div id = 'fixed'> I'm Fixed </div> 
 
<div id = 'normal'> I'm Normal </div>