z-index no funciona con posicionamiento fijo

422

Tengo un divcon posicionamiento predeterminado (es decir position:static) y un divcon una fixedposición.

Si configuro los índices z de los elementos, parece imposible hacer que el elemento fijo vaya detrás del elemento estático.

    #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>
Expandir fragmento

O en jsfiddle aquí: http://jsfiddle.net/mhFxf/

Puedo solucionar esto usando position:absolute el elemento estático, pero ¿alguien puede decirme por qué sucede esto?

(Parece que hay una pregunta similar a esta, ( Posicionamiento fijo que rompe el índice z ) pero no tiene una respuesta satisfactoria, por lo tanto, estoy preguntando esto aquí con mi código de ejemplo)

css z-index DanSingerman
fuente

Respuestas:

146

Esta pregunta se puede resolver de varias maneras, pero realmente, conocer las reglas de apilamiento le permite encontrar la mejor respuesta que funcione para usted.

Soluciones

El <html>elemento es su único contexto de apilamiento, así que solo siga las reglas de apilamiento dentro de un contexto de apilamiento y verá que los elementos se apilan en este orden

  1. El elemento raíz del contexto de apilamiento (el <html>elemento en este caso)
  2. Elementos posicionados (y sus elementos secundarios) con valores negativos de índice z (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según la apariencia en el HTML)
  3. Elementos no posicionados (ordenados por apariencia en el HTML)
  4. Elementos posicionados (y sus elementos secundarios) con un valor de índice z de auto (ordenado por aparición en el HTML)
  5. Elementos posicionados (y sus elementos secundarios) con valores positivos de índice z (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según la apariencia en el HTML)

Así que puedes

  1. establezca un índice z de -1, para que el #underíndice z posicionado aparezca detrás del #overelemento no posicionado
  2. establecer la posición de #overpara relativeque la regla 5 se aplique a ella

El verdadero problema

Los desarrolladores deben saber lo siguiente antes de intentar cambiar el orden de apilamiento de los elementos.

  1. Cuando se forma un contexto de apilamiento
    • Por defecto, el <html>elemento es el elemento raíz y es el primer contexto de apilamiento
  2. Orden de apilamiento dentro de un contexto de apilamiento

El orden de apilamiento y las reglas de contexto de apilamiento a continuación son de este enlace

Cuando se forma un contexto de apilamiento

  • Cuando un elemento es el elemento raíz de un documento (el <html>elemento)
  • Cuando un elemento tiene un valor de posición distinto de estático y un valor de índice z distinto de auto
  • Cuando un elemento tiene un valor de opacidad menor que 1
  • Varias propiedades CSS más nuevas también crean contextos de apilamiento. Estos incluyen: transformaciones, filtros, regiones CSS, medios paginados y posiblemente otros. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Position/Understanding_z_index/The_stacking_context
  • Como regla general, parece que si una propiedad CSS requiere renderizarse en un contexto fuera de pantalla, debe crear un nuevo contexto de apilamiento.

Orden de apilamiento dentro de un contexto de apilamiento

El orden de los elementos:

  1. El elemento raíz del contexto de apilamiento (el <html>elemento es el único contexto de apilamiento por defecto, pero cualquier elemento puede ser un elemento raíz para un contexto de apilamiento, consulte las reglas anteriores)
    • No puede colocar un elemento secundario detrás de un elemento de contexto de apilamiento raíz
  2. Elementos posicionados (y sus elementos secundarios) con valores negativos de índice z (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según la apariencia en el HTML)
  3. Elementos no posicionados (ordenados por apariencia en el HTML)
  4. Elementos posicionados (y sus elementos secundarios) con un valor de índice z de auto (ordenado por aparición en el HTML)
  5. Elementos posicionados (y sus elementos secundarios) con valores positivos de índice z (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según la apariencia en el HTML)
Mr_Moneybags
fuente
3
Algunos pueden encontrar esto útil también: Lo que nadie te dijo sobre el Índice Z
Mentalista
450

Añadir 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>
Expandir fragmento

Violín

stephenmurdoch
fuente
14
updates.html5rocks.com/2012/09/… es una excelente referencia sobre cómo la posición fija, absoluta y relativa interactúa con el índice z.
Lo hizo el
@marflar Un placer. Por cierto, eche un vistazo a su violín. hay una etiqueta extra </body>y una etiqueta extra </html>al final.
Michel Ayres
2
Aquí hay un violín que demuestra el contexto de apilamiento. Se explica aquí .
kdbanman
La eliminación position: relativede sobre elemento realmente solucionó mi problema.
Alex G
thanksssssss <3
Karl Anthony Baluyot
32

El índice z solo funciona dentro de un contexto particular relative, es decir , fixedo absoluteposición.

El índice z para un div relativo no tiene nada que ver con el z-indexde un div absoluto o fijo.

EDITAR Esta es una respuesta incompleta. Esta respuesta proporciona información falsa. Por favor revise el comentario de @ Dansingerman y el ejemplo a continuación.

cusimar9
fuente
3
¿Puede ampliar cómo funciona el índice z en un contexto particular y / o proporcionar una referencia?
DanSingerman
13
El índice z afecta el orden de dos divs, incluso si uno es relativo a la posición y el otro es absoluto.
Raffael
65
Esta respuesta es incorrecta. Aquí hay un violín que demuestra el contexto de apilamiento como se explica aquí . @Dansingerman.
kdbanman
1
Gracias por su jsFiddle @kbdanman, me ayudó a entender el contexto de apilamiento con un visual.
dhruvpatel
8
@JoeMorano, Mayor z está más cerca de la parte superior, independientemente del posicionamiento absoluto o relativo. Lo que importa es el nivel en el árbol de documentos. Divs 4, 5, 6 son hijos de div 3, mientras que divs 1 y 2 son hermanos de div 3. Div 1 tiene una z mayor que div 3, por lo que div 1 está encima de div 3 y todos sus hijos. Div 2 tiene una z menor que div 3, por lo que div 3 y todos sus hijos están encima de div 2
kdbanman
31

overComo su div no tiene un posicionamiento, el índice z no sabe dónde y cómo posicionarlo (¿y con respecto a qué?). Simplemente cambie la posición de su div superior a relativa, para que no haya efectos secundarios en ese div y luego el div inferior obedecerá a su voluntad.

Aquí está su ejemplo en jsfiddle: Fiddle

editar : ¡Veo que alguien ya mencionó esta respuesta!

lo digo en serio
fuente
18

Dale #underun negativo z-index, por ejemplo-1

Esto sucede porque z-indexse ignora la propiedad position: static;, que es el valor predeterminado; así que en el código CSS que escribiste, z-indexes 1para ambos elementos sin importar qué tan alto lo configures #over.

Al dar #underun valor negativo, estará detrás de cualquier z-index: 1;elemento, es decir #over.

Carlos Precioso
fuente
También tuve este problema: establecer el 'bajo' div en 0 funcionó para mí.
Mick Sear
5

Estaba construyendo un menú de navegación. Tengo overflow: hiddenen mi navegador css que ocultaba todo. Pensé que era un problema de índice z, pero realmente estaba ocultando todo fuera de mi navegador.

thedanotto
fuente
0

El comportamiento de elementos fijos (y elementos absolutos) como se define en la especificación CSS:

Se comportan a medida que se separan del documento y se colocan en el elemento primario fijo / absoluto más cercano. (no una cita palabra por palabra)

Esto hace que el cálculo del índice zin sea un poco complicado, resolví mi problema (la misma situación) creando dinámicamente un contenedor en el elemento del cuerpo y moviendo todos esos elementos (que se clasifican como "my-fixed-ones" dentro de ese elemento a nivel del cuerpo )

Bakhshi
fuente