Z-INDEX(arriba hacia abajo => se apila de adentro hacia fuera);( y se edita de afuera hacia adentro))

PHOTO EMBED

Sun Nov 28 2021 20:37:18 GMT+0000 (Coordinated Universal Time)

Saved by @samn #css #html #z-index 

<h1>The z-index Property</h1>

<div ></div>

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>


/*css*/
h1 {
 position:absolute;
 z-idex: ;
}
div{
  background-image:url(https://picsum.photos/200);
  width:100px;
  height:140px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
position:absolute;
 z-index: ;
}
content_copyCOPY

"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/