¿Por qué el índice z no funciona?


182

Entonces, si entiendo z-indexcorrectamente, sería perfecto en esta situación:

ingrese la descripción de la imagen aquí

Quiero colocar la imagen inferior (la etiqueta / tarjeta) debajo del div encima de ella. Entonces no puedes ver los bordes afilados. ¿Cómo hago esto?

z-index:-1 // on the image tag/card

o

z-index:100 // on the div above

tampoco funciona Tampoco una combinación de algo como esto. ¿Cómo?

Respuestas:


434

La z-indexpropiedad solo funciona en elementos con un positionvalor distinto de static(p position: absolute;. Ej . position: relative;, O position: fixed).

También hay position: sticky;compatibilidad con Firefox, tiene el prefijo Safari, funcionó durante un tiempo en versiones anteriores de Chrome con un indicador personalizado y Microsoft está considerando agregarlo a su navegador Edge.

Importante
Para un posicionamiento regular, asegúrese de incluir position: relativeen los elementos donde también configura el z-index. De lo contrario, no tendrá efecto.



3
añadiendo a esta respuesta, cromo y probablemente otros navegadores partir de este escrito requerir que explícitamente Estado position: relativepara z-index para el trabajo, a pesar de los elementos comporta de otra manera en relación por defecto
benipsen

staticLos elementos son estáticos y no pueden moverse x, y or z planes. No pueden mudarse x plane (left or right)ni les y plane (top or bottom)gusta cuando trabajamos con ellos position: absolute. Y tampoco pueden moverse en el z plane i.e. with z-index.
Akash

¿conoce algún problema con el uso z-indexen un elemento de cuadrícula?
oldboy

60

Si establece la posición en un valor diferente staticpero el elemento z-indextodavía no parece funcionar, puede ser que algún elemento principal se haya z-indexconfigurado.

Los contextos de apilamiento tienen jerarquía, y cada contexto de apilamiento se considera en el orden de apilamiento del contexto de apilamiento primario.

Así que con el siguiente html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

No importa cuán grande es el z-indexde el3se establecerá, siempre será bajo el1, ya que de los padres tiene contexto de pila baja. Puede imaginar el orden de apilamiento como niveles en los que el orden de apilamiento el3es en realidad 3.8, que es inferior a 5 .

Si desea verificar los contextos de apilamiento de elementos primarios, puede usar esto:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Hay un gran artículo sobre contextos de apilamiento en MDN


¿Cómo arreglar eso?
SM Pat

3
establecer el índice z adecuado de elementos primarios.
Buksy

encanta ese guión
Matoeil

31

Sus elementos necesitan tener un positionatributo. (p absolute. ej . relative, fixed) o z-indexno funcionará.


26

En muchos casos, un elemento debe estar posicionado para z-indextrabajar.

De hecho, la aplicación position: relativea los elementos en la pregunta probablemente resolvería el problema (pero no se proporciona suficiente código para saberlo con certeza).

En realidad, position: fixed, position: absolutey position: stickypermitirá también z-index, pero esos valores también cambiar el diseño. Con position: relativeel diseño no se altera.

Esencialmente, mientras el elemento no esté position: static(la configuración predeterminada) se considera posicionado y z-indexfuncionará.


Muchas respuestas a "¿Por qué no funciona el índice z?" las preguntas afirman que z-index solo funciona en elementos posicionados. A partir de CSS3, esto ya no es cierto.

Los elementos que son elementos flexibles o elementos de cuadrícula se pueden usar z-indexincluso cuando positionestán static.

De las especificaciones:

4.3. Artículo Flex Z-Ordering

Los elementos flexibles pintan exactamente igual que los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar y los z-indexvalores que no sean autocrear un contexto de apilamiento, incluso si positiones así static.

5.4. Ordenamiento del eje Z: la z-indexpropiedad

El orden de pintura de los elementos de la cuadrícula es exactamente el mismo que el de los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar y los z-indexvalores que no sean autocrear un contexto de apilamiento, incluso si positiones así static.

Aquí hay una demostración de cómo z-indextrabajar en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/


3
"Los elementos que son elementos flexibles o elementos de cuadrícula pueden usar el índice z incluso cuando la posición es estática". Sí, la especificación esencialmente dice que debe tratarse position: staticexactamente igual que trataría los elementos position: relativeflexibles y de cuadrícula debido a la naturaleza dinámica de esos métodos de diseño. Entonces, quizás diría que no es que ya no sea cierto en CSS3 que un elemento necesita ser posicionado, sino que CSS3 trata los elementos flexibles y de cuadrícula como si estuvieran posicionados, independientemente. Sin embargo, probablemente solo dos formas de ver lo mismo.
TylerH

@TylerH debemos prestar atención a esa parte de la especificación porque debemos tratar la estática de la misma manera que la relativa solo cuando se trata del índice z y no en general. Por ejemplo, no puede desplazar un elemento flexible con izquierda / arriba / abajo / derecha a menos que especifique explícitamente position:relative. Los descendientes de elementos flexibles con posición absoluta no considerarán el elemento flexible como su bloque contenedor porque el elemento flexible no está posicionado. ( jsfiddle.net/0yo7utfL/2 )
Temani Afif

Encontré un extraño "error" con CSS. por alguna razón overflow-y: scrollimpide que overflow-x: visiblefuncione ... ¿puedes echar un vistazo?
oldboy
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.