Z-INDEX(arriba hacia abajo => se apila de adentro hacia fuera);( y se edita de afuera hacia adentro))
Sun Nov 28 2021 20:37:18 GMT+0000 (UTC)
Saved by @samn #css #html #z-index
"quiero poner el h1 sobre el div" => según el orden html se apilara 1ºh1, 2ºdiv ,3ºp ; entonces para "editar con z-index" se edita de afuera hacia dentro => por eso se le pone: z-index: -1; al div y no z-index:1; al h1(eso esta mal). - cuando hay anidamiento: “También tenga en cuenta que la anidación juega un papel importante. Si un elemento B se encuentra encima del elemento A, un elemento hijo del elemento A nunca puede ser más alto que el elemento B. " -el índice z se puede usar para reorganizar el orden de apilamiento de los elementos solo dentro de su propio contexto de apilamiento . Todo ese contexto de apilamiento tiene una posición de apilamiento dentro de su contexto de apilamiento que está determinada por su propiedad de índice z y las de sus hermanos en ese contexto de apilamiento principal - div1>div2 => div2(hijo) estará mas afuera que su contenedor; pero con z-inex= 0, si uno de sus hijos tiene algo menor que eso , el padre se pondrá encima. **********************Padre e hijo *********************** // Un hijo jamás estará más al fondo que su padre( ambos con position: por defecto) // un elemento con position: absolute; se le puede manejar con z-index para ponerlo más al fondo de su padre(con position:por defecto); // padre e hijo con position:absolute; ambos al tener el mismo position se mantienen con su profundidad por defecto; al manipular la profundidad, recuerda que siempre es de afuera hacia dentro(no se puede sacar los del fondo y ponerlo encima),se saca los de afuera y se pone adentro, y una ves que el fondo esta afuera, se le podrá poner más al fondo si deseas. **********************Hermanos adyacentes *********************** //Se apilan siguiendo el orden de (arriba=>abajo) == (fondo=>afuera) al aplicarse position absolute a ambos. // Conviene ordenar la profundidad de los hermanos con z-index positivos, porque los negativos lo pondrán detrás del padre. // En cuanto a la teoría=>"se ordena de afuera hacia dentro"; en este caso como son hermanos adyacentes, empezaron en el mismo nivel, puedes mover cualquiera. *********En resumen: siempre se moverá de afuera=>fondo; y si tienen el mismo nivel cualquiera(es intuitivo). lo que determina que comportamiento es, será el nivel inicial en el que estén los elementos implicados********************** NOTA: el link, lee el primer comentario, el articulo es básico.
https://css-tricks.com/almanac/properties/z/z-index/
Comments