working posicionar posicionamiento posicion not index hacer fijo fijar fija ejemplos div dejar css z-index

css - posicionar - El índice z no funciona con posicionamiento fijo



posicionar div css (9)

Cuando los elementos se colocan fuera del flujo normal, pueden superponerse a otros elementos.

de acuerdo con la sección de Elementos Superpuestos en http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

Tengo un div con posicionamiento predeterminado (es decir, position:static ) y un div con una posición fixed .

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>

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

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

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

Añadir position: relative; para acabar

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

Fiddle

Basta con mirar en la here . Hay la mejor explicación que he visto nunca.

Dar el #under un z-index negativo, por ejemplo, -1

Esto sucede porque la propiedad z-index se ignora en la position: static; , que pasa a ser el valor por defecto; por lo tanto, en el código CSS que escribió, z-index es 1 para ambos elementos, sin importar qué tan alto lo establezca en #over .

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

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 elemento <html> 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 elemento <html> en este caso)
  2. Elementos posicionados (y sus elementos secundarios) con valores de índice z negativos (los valores más altos se apilan frente a los valores más bajos; los elementos con el mismo valor se apilan de acuerdo con su apariencia en el HTML)
  3. Elementos no posicionados (ordenados por aspecto en el HTML)
  4. Elementos posicionados (y sus hijos) con un valor de índice z de auto (ordenados por apariencia en el HTML)
  5. Elementos posicionados (y sus elementos secundarios) con valores de índice z positivos (los valores más altos se apilan frente a los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

Así que puedes

  1. establezca un índice z de -1, para #under posición -ve el índice z aparece detrás del elemento #over no posicionado
  2. establece la posición de #over en relative para que la regla 5 se aplique a ella

El problema real

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
    • De forma predeterminada, el elemento <html> 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 elemento <html> )
  • 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 nuevas también crean contextos de apilamiento. Estos incluyen: transformaciones, filtros, css-regiones, 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 la representación 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:

  1. El elemento raíz del contexto de apilamiento (el elemento <html> 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 poner un elemento secundario detrás de un elemento de contexto de apilamiento de raíz
  2. Elementos posicionados (y sus elementos secundarios) con valores de índice z negativos (los valores más altos se apilan frente a los valores más bajos; los elementos con el mismo valor se apilan de acuerdo con su apariencia en el HTML)
  3. Elementos no posicionados (ordenados por aspecto en el HTML)
  4. Elementos posicionados (y sus hijos) con un valor de índice z de auto (ordenados por apariencia en el HTML)
  5. Elementos posicionados (y sus elementos secundarios) con valores de índice z positivos (los valores más altos se apilan frente a los valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

Estaba construyendo un menú de navegación. Tengo overflow: hidden en el css de mi navegador que lo escondió todo. Pensé que era un problema de índice z, pero en realidad estaba escondiendo todo lo que estaba fuera de mi navegador.

el comportamiento de los elementos fijos (y elementos absolutos) tal como se define en las especificaciones de CSS:

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

Esto hace que el cálculo de zindex 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 "mis-fijos-unos" dentro de ese elemento del nivel del cuerpo )

ya que su div en over no tiene un posicionamiento, el índice z no sabe dónde y cómo posicionarlo (y con respecto a qué). Simplemente cambia la posición de over div a relativa, por lo que no hay efectos secundarios en esa div y entonces la div divina obedecerá tu voluntad.

Aquí está tu ejemplo en jsfiddle: Fiddle

Edit : Veo que alguien ya ha mencionado esta respuesta!

El índice z solo funciona dentro de un contexto particular, es decir, fixed posición relative , fixed o absolute .

El índice z para un div relativo no tiene nada que ver con el z-index de 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.