z-index no funciona con posicionamiento fijo

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

Si puedo configurar el z-índices de los elementos, parece imposible hacer que el elemento fijo de ir detrás de el elemento estático.

CSS:

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

HTML:

    <!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 evitar esto mediante el uso de
position:absolute
en el elemento estático, pero ¿alguien puede decirme por qué está pasando esto?

(Parece ser que hay una pregunta similar a esta, (Fija el Posicionamiento de romper z-index) pero doesnt tiene una respuesta satisfactoria, por lo tanto estoy pidiendo esta aquí con mi código de ejemplo)

InformationsquelleAutor DanSingerman | 2011-03-07

8 Kommentare

  1. 128

    Esta pregunta puede ser resuelto en un número de maneras, pero, en realidad, conocer las reglas de apilamiento permite encontrar la mejor respuesta que funcione para usted.

    Soluciones

    La <html> elemento es su única apilamiento de contexto, tan sólo tienes que seguir las reglas de apilamiento dentro de un contexto de apilamiento y verá que los elementos se apilan en este orden

    1. El contexto de apilamiento del elemento raíz (la <html> elemento en este caso)
    2. Posicionado de los elementos (y sus hijos) con negativo de z-index valores (los valores más altos se apilan frente a valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)
    3. No de los elementos con posición (ordenadas por la aparición en el HTML)
    4. Posicionado de los elementos (y sus hijos) con un valor de índice z automático (ordenado por la aparición en el HTML)
    5. Posicionado de los elementos (y sus hijos) con un resultado positivo de z-index valores (los valores más altos se apilan frente a valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)

    Así que usted puede

    1. conjunto de un índice z de -1, por #under posicionado -ve z-index aparecen detrás de la no-coloca #over elemento
    2. establecer la posición de #over a relative de modo que la regla 5 se aplica a ella

    El Verdadero Problema

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

    1. Cuando un apilamiento de contexto está formado
      • 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 apilamiento contexto reglas están por debajo de este enlace

    Cuando un apilamiento de contexto está formado

    • Cuando un elemento es el elemento raíz de un documento (el <html> elemento)
    • Cuando un elemento tiene un valor de posición de otros que estático y un z-index valor distinto de auto
    • Cuando un elemento tiene un valor de opacidad de menos de 1
    • Varias nuevas propiedades CSS también crear contextos de apilamiento. Estos incluyen: transforma, filtros, css-regiones, paginar los medios de comunicación, 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 de representación en un fuera de la pantalla contexto, se debe crear un nuevo contexto de apilamiento.

    Orden de apilamiento dentro de un Contexto de Apilamiento

    El orden de los elementos:

    1. El contexto de apilamiento del elemento raíz (la <html> elemento es el único contexto de apilamiento por defecto, sino que cualquier elemento puede ser un elemento raíz de un contexto de apilamiento, consulte las reglas de arriba)
      • Usted puede poner un elemento secundario detrás de una raíz de apilamiento elemento de contexto
    2. Posicionado de los elementos (y sus hijos) con negativo de z-index valores (los valores más altos se apilan frente a valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)
    3. No de los elementos con posición (ordenadas por la aparición en el HTML)
    4. Posicionado de los elementos (y sus hijos) con un valor de índice z automático (ordenado por la aparición en el HTML)
    5. Posicionado de los elementos (y sus hijos) con un resultado positivo de z-index valores (los valores más altos se apilan frente a valores más bajos; los elementos con el mismo valor se apilan según su apariencia en el HTML)
  2. 444

    Agregar position: relative; a #más de

    CSS:

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

    HTML:

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

    El violín

    • updates.html5rocks.com/2012/09/… es una excelente referencia sobre cómo la posición fija, absoluta y relativa de interactuar con z-index.
    • Mi placer. Por cierto, echa un vistazo a su violín. hay una etiqueta adicional </body> y una etiqueta adicional </html> en la final.
    • Aquí es un violín demostrar contexto de apilamiento. Se explica aquí.
    • La eliminación de position: relative de más de elemento realmente solucionado mi problema.
  3. 34

    z-index sólo funciona dentro de un contexto particular, es decir,relative, fixed o absolute posición.

    z-index para un pariente div no tiene nada que ver con la z-index de una manera absolutamente fija o div.

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

    • Se puede ampliar sobre cómo z-index funciona en un contexto particular, y/o proporcionar una referencia?
    • z-index afecta el orden de los dos divs incluso si uno está en la posición relativa y el otro es absoluta.
    • Esta respuesta es incorrecta. Aquí es un violín la demostración de apilamiento de contexto tal y como se explica aquí. @Dansingerman.
    • Gracias por tu jsFiddle @kbdanman, me ayudó a comprender el contexto de apilamiento con un visual.
    • Pensé que el mayor z-index fue a la cima? ¿Por qué son los valores más altos en la parte inferior?
    • Mayor z está más cerca de la parte superior, independientemente de la ubicación absoluta o relativa. Lo que importa es el nivel en el árbol del documento. Div 4, 5, 6 son niños de div 3, mientras que los div 1 y 2 son hermanos de div 3. Div 1 tiene una mayor z de div 3, así div 1 está en la parte superior de la div 3 y todos sus hijos. Div 2 tiene un menor z de div 3, así div 3 y todos sus hijos están en la parte superior de div 2
    • relativa < obsolute < fijo jsfiddle.net/A2xht/421

  4. 29

    desde su over div no tiene un posicionamiento, el z-index no saben de dónde y cómo la posición de la misma (y con respecto a qué?). Sólo tienes que cambiar tus encima del div posición relativa, por lo que no hay efectos secundarios en ese div y, a continuación, el bajo div obedecer a su voluntad.

    aquí es su ejemplo en jsfiddle: El violín

    editar: veo que alguien ya se ha mencionado esta respuesta!

  5. 18

    Dar la #under negativo z-index, por ejemplo, -1

    Esto sucede porque el z-index propiedad se omite en position: static;, que pasa a ser el valor por defecto; por lo que en el código CSS que escribió, z-index es 1 para ambos elementos no importa a qué altura se establece en #over.

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

    • He tenido este problema también – configuración de la ‘virtud’ div a 0 trabajó para mí.
  6. 5

    Yo era la construcción de un nav el menú. He overflow: hidden en mi nav del css que lo ocultaba todo. Pensé que era un z-index problema, pero realmente me estaba escondiendo todo lo que fuera de mi nav.

  7. 0

    el comportamiento de los elementos fijos (y absoluta de los elementos) como se define en la Especificación CSS:

    Se comportan como están separadas de documento, y se coloca en el más cercano fijo/absoluta posicionado de los padres. (ni una palabra por palabra de la cita)

    Esto hace que zindex cálculo un poco complicado, he resuelto mi problema (la misma situación) de forma dinámica la creación de un contenedor en el elemento de cuerpo y mover todos esos elementos (que son de clase-ed como «mi fijo queridos» dentro de ese cuerpo-elemento de nivel)

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea