Apilando sin z-index

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

Apilando sin z-index

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

  1. El fondo y los bordes del elemento raiz
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

Notas:

  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
  • Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

understanding_zindex_01.png

 

Ejemplo

HTML

<div id="absdiv1">
    <br /><span class="bold">DIV #1</span>
    <br />position: absolute; </div>
<div id="reldiv1">
    <br /><span class="bold">DIV #2</span>
    <br />position: relative; </div>
<div id="reldiv2">
    <br /><span class="bold">DIV #3</span>
    <br />position: relative; </div>
<div id="absdiv2">
    <br /><span class="bold">DIV #4</span>
    <br />position: absolute; </div>
<div id="normdiv">
    <br /><span class="bold">DIV #5</span>
    <br />no positioning </div>

CSS

 .bold {
     font-weight: bold;
     font: 12px Arial;
 }
 #normdiv {
     height: 70px;
     border: 1px dashed #999966;
     background-color: #ffffcc;
     margin: 0px 50px 0px 50px;
     text-align: center;
 }
 #reldiv1 {
     opacity: 0.7;
     height: 100px;
     position: relative;
     top: 30px;
     border: 1px dashed #669966;
     background-color: #ccffcc;
     margin: 0px 50px 0px 50px;
     text-align: center;
 }
 #reldiv2 {
     opacity: 0.7;
     height: 100px;
     position: relative;
     top: 15px;
     left: 20px;
     border: 1px dashed #669966;
     background-color: #ccffcc;
     margin: 0px 50px 0px 50px;
     text-align: center;
 }
 #absdiv1 {
     opacity: 0.7;
     position: absolute;
     width: 150px;
     height: 350px;
     top: 10px;
     left: 10px;
     border: 1px dashed #990000;
     background-color: #ffdddd;
     text-align: center;
 }
 #absdiv2 {
     opacity: 0.7;
     position: absolute;
     width: 150px;
     height: 350px;
     top: 10px;
     right: 10px;
     border: 1px dashed #990000;
     background-color: #ffdddd;
     text-align: center;
 }

Resultado

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

También puedes ver

Información del documento original

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javichito
 Última actualización por: javichito,