z-index non funziona con posizionamento fisso

422

Ho un divposizionamento predefinito (cioè position:static) e un divcon una fixedposizione.

Se imposto gli z-index degli elementi, sembra impossibile far andare l'elemento fisso dietro l'elemento statico.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
Espandi frammento

O su jsfiddle qui: http://jsfiddle.net/mhFxf/

Posso aggirare questo problema usando position:absolute l'elemento statico, ma qualcuno può dirmi perché questo sta accadendo?

(Sembra che ci sia una domanda simile a questa, ( Fixed Positioning breaking z-index ) ma non ha una risposta soddisfacente, quindi sto chiedendo questo qui con il mio codice di esempio)

css  z-index 
— DanSingerman
fonte

Risposte:

146

Questa domanda può essere risolta in diversi modi, ma in realtà, conoscere le regole di accatastamento ti consente di trovare la risposta migliore per te.

soluzioni

L' <html>elemento è il tuo unico contesto di accatastamento, quindi basta seguire le regole di accatastamento all'interno di un contesto di accatastamento e vedrai che gli elementi sono accatastati in questo ordine

  1. L'elemento root del contesto di impilamento (l' <html>elemento in questo caso)
  2. Elementi posizionati (e i relativi figli) con valori di indice z negativi (i valori più alti sono impilati davanti ai valori più bassi; gli elementi con lo stesso valore sono impilati in base all'aspetto nell'HTML)
  3. Elementi non posizionati (ordinati per aspetto nell'HTML)
  4. Elementi posizionati (e i relativi figli) con un valore z-index di auto (ordinati per aspetto nel codice HTML)
  5. Elementi posizionati (e i loro figli) con valori di indice z positivi (i valori più alti sono impilati davanti ai valori più bassi; gli elementi con lo stesso valore sono impilati in base all'aspetto nell'HTML)

Così puoi

  1. imposta un indice z di -1, poiché #underposizionato -ve l'indice z appare dietro l' #overelemento non posizionato
  2. imposta la posizione di #overto in relativemodo che la regola 5 si applichi ad essa

Il vero problema

Gli sviluppatori dovrebbero conoscere quanto segue prima di provare a cambiare l'ordine di sovrapposizione degli elementi.

  1. Quando si forma un contesto di sovrapposizione
    • Per impostazione predefinita, l' <html>elemento è l'elemento radice ed è il primo contesto di sovrapposizione
  2. Ordine di sovrapposizione in un contesto di sovrapposizione

L'ordine di impilamento e le regole di contesto di accatastamento sottostanti provengono da questo link

Quando si forma un contesto di sovrapposizione

  • Quando un elemento è l'elemento radice di un documento (l' <html>elemento)
  • Quando un elemento ha un valore di posizione diverso da statico e un valore di indice z diverso da auto
  • Quando un elemento ha un valore di opacità inferiore a 1
  • Diverse proprietà CSS più recenti creano anche contesti di sovrapposizione. Questi includono: trasformazioni, filtri, regioni css, supporti di paging e possibilmente altri. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Come regola generale, sembra che se una proprietà CSS richiede il rendering in un contesto fuori schermo, deve creare un nuovo contesto di sovrapposizione.

Ordine di sovrapposizione in un contesto di sovrapposizione

L'ordine degli elementi:

  1. L'elemento root del contesto di stacking (l' <html>elemento è l'unico contesto di stacking per impostazione predefinita, ma qualsiasi elemento può essere un elemento root per un contesto di stacking, vedere le regole sopra)
    • Non è possibile inserire un elemento figlio dietro un elemento di contesto di stacking principale
  2. Elementi posizionati (e i relativi figli) con valori di indice z negativi (i valori più alti sono impilati davanti ai valori più bassi; gli elementi con lo stesso valore sono impilati in base all'aspetto nell'HTML)
  3. Elementi non posizionati (ordinati per aspetto nell'HTML)
  4. Elementi posizionati (e i relativi figli) con un valore z-index di auto (ordinati per aspetto nel codice HTML)
  5. Elementi posizionati (e i loro figli) con valori di indice z positivi (i valori più alti sono impilati davanti ai valori più bassi; gli elementi con lo stesso valore sono impilati in base all'aspetto nell'HTML)
— Mr_Moneybags
fonte
3
Alcuni potrebbero trovare utile anche questo: quello che nessuno ti ha detto su Z-Index
— Mentalist
450

Aggiungi position: relative;a #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
Espandi frammento

Violino

— stephenmurdoch
fonte
14
updates.html5rocks.com/2012/09/… è un riferimento eccellente su come la posizione fissa, assoluta e relativa interagiscono con z-index.
— Fatto il
@marflar Piacere mio. A proposito, dai un'occhiata al tuo violino. c'è un tag extra </body>e un tag extra </html>alla fine.
— Michel Ayres,
2
Ecco un violino che dimostra il contesto di accatastamento. È spiegato qui .
— kdbanman,
La rimozione position: relativedall'elemento over ha effettivamente risolto il mio problema.
— Alex G,
thanksssssss <3
— Karl Anthony Baluyot il
32

z-index funziona solo in un contesto particolare, ad es. relative, fixedo absoluteposizione.

L'indice z per un div relativo non ha nulla a che fare con il z-indexdiv assoluto o fisso.

EDIT Questa è una risposta incompleta. Questa risposta fornisce informazioni false. Si prega di rivedere il commento di @ Dansingerman e l'esempio di seguito.

— cusimar9
fonte
3
Puoi espandere il modo in cui z-index funziona in un determinato contesto e / o fornire un riferimento?
— DanSingerman
13
L'indice z influenza l'ordine di due div anche se uno è relativo alla posizione e l'altro è assoluto.
— Raffael,
65
Questa risposta è sbagliata Ecco un violino che dimostra il contesto di accatastamento come è spiegato qui . @Dansingerman.
— kdbanman,
1
Grazie per il tuo jsFiddle @kbdanman, mi ha aiutato a capire il contesto di impilamento con una grafica.
— dhruvpatel,
8
@JoeMorano, z più alto è più vicino alla cima, indipendentemente dal posizionamento assoluto o relativo. Ciò che conta è il livello nella struttura del documento. Le div 4, 5, 6 sono figli della div 3, mentre le div 1 e 2 sono fratelli della div 3. La div 1 ha una z maggiore della div 3, quindi la div 1 è in cima alla div 3 e tutti i suoi figli. Div 2 ha una z inferiore a div 3, quindi div 3 e tutti i suoi figli sono in cima a div 2
— kdbanman,
31

poiché il tuo overdiv non ha un posizionamento, l'indice z non sa dove e come posizionarlo (e rispetto a cosa?). Basta cambiare la posizione del tuo over div in relativo, quindi non ci sono effetti collaterali su quel div e quindi il div inferiore obbedirà alla tua volontà.

ecco il tuo esempio su jsfiddle: Fiddle

modifica : vedo qualcuno già menzionato questa risposta!

— sono serio
fonte
18

Dare #underun negativo z-index, ad es-1

Ciò accade perché la z-indexproprietà viene ignorata in position: static;, che risulta essere il valore predefinito; quindi nel codice CSS che hai scritto, z-indexè 1per entrambi gli elementi, non importa quanto in alto lo hai impostato #over.

Dando #underun valore negativo, sarà dietro qualsiasi z-index: 1;elemento, ad es #over.

— Carlos Precioso
fonte
Ho avuto anche questo problema: impostare il div 'under' su 0 ha funzionato per me.
— Mick Sear,
5

Stavo costruendo un menu di navigazione. Ho overflow: hiddennel mio nav css che ha nascosto tutto. Pensavo fosse un problema con l'indice z, ma in realtà nascondevo tutto al di fuori del mio sistema di navigazione.

— thedanotto
fonte
0

il comportamento degli elementi fissi (e degli elementi assoluti) come definito nelle specifiche CSS:

Si comportano come se fossero distaccati dal documento e collocati nel genitore posizionato fisso / assoluto più vicino. (non una citazione parola per parola)

Questo rende il calcolo di zindex un po 'complicato, ho risolto il mio problema (la stessa situazione) creando dinamicamente un contenitore nell'elemento body e spostando tutti questi elementi (che sono classificati come "my-fixed-one" all'interno di quell'elemento a livello del corpo )

— Bakhshi
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.