Así que si he entendido correctamente z-index, sería perfecta en esta situación:¿Por qué no funciona el índice Z?
que desea colocar la imagen de fondo (la etiqueta/tarjeta) por debajo de la div por encima de ella. Entonces no puedes ver los bordes filosos. ¿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?
La propiedad z-index sólo funciona en elementos con un valor position distinto static (por ejemplo position: absolute;, position: relative;, o position: fixed).
También hay position: sticky; que es compatible con Firefox, tiene el prefijo Safari, trabajó durante un tiempo en versiones anteriores de Chrome bajo una bandera personalizada y está bajo consideración de Microsoft para agregarlo a su navegador Edge.
sus elementos deben tener un atributo de posición. (por ejemplo, absoluto, relativo, fijo) o z-index no funcionará
En muchos casos, un elemento debe colocarse para que z-index funcione.
De hecho, la aplicación de position: relative a los elementos en la pregunta probablemente resolvería el problema (pero no hay suficiente código para estar seguro).
En realidad, position: fixed, position: absolute y position: sticky también permitirá z-index, pero esos valores también cambiar el diseño. Con position: relative el diseño no se altera.
Básicamente, siempre que el elemento no sea position: static (la configuración predeterminada) se considera colocado y z-index funcionará.
Muchas respuestas a "¿Por qué no es z-index de trabajo?" preguntas afirman que z-indexsolo trabaja en elementos posicionados. A partir de CSS3, esto ya no es cierto.
elementos que son flex items o grid items puede utilizar z-index incluso cuando position es static.
De las especificaciones:
artículos Flex pintan exactamente igual que los bloques en línea, excepto que el orden del documento fin modificado se usa en lugar del orden prima documento y
z-indexlos valores distintos deautocrean un contexto de apilamiento incluso sipositionesstatic.5.4. Z-axis Ordering: the
z-indexpropertyEl orden de la pintura de los elementos de cuadrícula es exactamente lo mismo que los bloques en línea, excepto que el orden del documento fin modificados se en lugar del orden del documento en bruto, y
z-indexvalores distintos deautocrear un contexto de pila incluso sipositionesstatic.
He aquí una demostración de z-index de trabajo sobre la no posicionados elementos flexibles: https://jsfiddle.net/m0wddwxs/
"Los elementos que son elementos flexibles o elementos de la cuadrícula se pueden utilizar z-index incluso cuando la posición es estática ". Sí, la especificación dice esencialmente que se debe tratar 'position: static' exactamente igual a como se trataría' position: relative' para los elementos flex y grid debido a la naturaleza dinámica de esos métodos de diseño. Así que 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 de flex y grid como si estuvieran posicionados, independientemente. Sin embargo, solo dos formas de ver lo mismo, probablemente. – TylerH
@TylerH, para hacer una evaluación adecuada, uno debería comprender * por qué * un elemento debe colocarse para que 'z-index' funcione en el diseño del bloque. Eso puede llevar a una comprensión de por qué el posicionamiento no es necesario en los diseños flexibles y de cuadrícula. Es uno de esos temas que he tenido en mi lista de lectura durante años, pero todavía no he llegado. –
¡Oh, vamos, no es que las especificaciones sean una lectura seca! ... :-P – TylerH
Si ajusta la posición a otro valor que static pero todavía no parece de z-index su elemento a trabajar, puede ser que algunos el elemento padre tiene z-index conjunto.
Los contextos de apilamiento tienen una jerarquía, y cada contexto de apilamiento se considera en el orden de apilamiento del contexto de apilamiento del elemento primario.
Así, con código HTML siguiente
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 lo grande que se establecerá el z-index de el3, siempre estará bajo el1 porque es de los padres tiene menor contexto de pila. Puede imaginar el orden de apilamiento como niveles donde el orden de apilamiento de el3 es en realidad 3.8 que es inferior a .
Si desea comprobar el apilamiento contextos de elementos primarios, puede utilizar 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));
favor presione a su código para una mejor comprensión – sandeep