El índice z no funciona con posicionamiento fijo

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;
}

<div id="over">
  Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

<div id="under"></div>

Expandir fragmento

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

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

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

Mar 07 '11 18:03 DanSingerman

Agregue position: relativecomo #overse muestra en este fragmento:

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

<div id="over">
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </>
</div>

<div id="under"></div>

Expandir fragmento

Violín

Mar 07 '2011 11:03 stephenmurdoch

Esta pregunta se puede resolver de varias maneras, pero en realidad, 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 simplemente siga las reglas de apilamiento dentro de un contexto de apilamiento y verá que los elementos se apilan en este orden.

El elemento raíz del contexto de apilamiento (el <html>elemento en este caso)

Elementos posicionados (y sus hijos) con valores de índice z negativos (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

Elementos no posicionados (ordenados por apariencia en el HTML)

Elementos posicionados (y sus hijos) con un valor de índice z automático (ordenados por apariencia en HTML)

Elementos posicionados (y sus hijos) con valores de índice z positivos (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

Así que puedes

establezca un índice z de -1, para #underel índice z posicionado -ve aparece detrás del #overelemento no posicionado
establezca la posición de #overto relativepara que se le aplique la regla 5

El verdadero problema

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

Cuando se forma un contexto de apilamiento
- De forma predeterminada, el <html>elemento es el elemento raíz y es el primer contexto de apilamiento.
Orden de apilamiento dentro de un contexto de apilamiento

El orden de apilamiento y las reglas de contexto de apilamiento a continuación provienen 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 automático
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_Positioning/Understanding_z_index/The_stacking_context
Como regla general, parece que si una propiedad CSS requiere renderizarse en un contexto fuera de la pantalla, debe crear un nuevo contexto de apilamiento.

Orden de apilamiento dentro de un contexto de apilamiento

El orden de los elementos:

El elemento raíz del contexto de apilamiento (el <html>elemento es el único contexto de apilamiento de forma predeterminada, pero cualquier elemento puede ser un elemento raíz para un contexto de apilamiento; consulte las reglas anteriores)
- No se puede colocar un elemento secundario detrás de un elemento de contexto de apilamiento raíz.
Elementos posicionados (y sus hijos) con valores de índice z negativos (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)
Elementos no posicionados (ordenados por apariencia en el HTML)
Elementos posicionados (y sus hijos) con un valor de índice z automático (ordenados por apariencia en HTML)
Elementos posicionados (y sus hijos) con valores de índice z positivos (los valores más altos se apilan delante de los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

Feb 06 '2017 20:02 Mr_Moneybags