Per tractar amb apilament de caixes relatives i absolutes cal tenir en compte dues regles:

• Una caixa relativa sempre tindrà un ordre d'apilament superior a les seves germanes anteriors i inferior a les posteriors.
• Una caixa relativa o absoluta filla d'una caixa relativa sempre tindrà un ordre d'apilament superior a les germanes de la caixa pare anteriors i inferior a les posteriors.

Per tant, donades tres caixes (A, B i C) on A i C són caixes relatives germanes i B és filla d'A i absoluta:

• A passaria per sota de C
• B passaria per sota de C

Per modificar l'ordre d'apilament cal usar la propietat z-index.

Per exemple, deixar l'estructura anterior tal que:

• A passi per sota de C
• B passi per sobre de C

Només caldria posar un z-index a la caixa B superior al de C. Si C no té cap z-index declarat, un z-index: 1 és suficient perque B tingui un ordre d'apilament superir.

En codi; donat un XHTML tal que:

<div id="a">
   <div id="b">lorem...</div>
   lorem...
</div>
<div id="c">
   lorem...
</div>

caldria un CSS tal que:

div {
   position: relative;
   background: #fc0;
}
#b {
   position: absolute;
   width: 3em;
   height: 8em;
   background: #900;
   z-index: 1;
}

Però la realitat és amarga, en Internet Explorer això no funciona. L'única manera és fer que la caixa A tingui un ordre d'apilament superior a C i per tant:

• A passi per sobre de C
• B passi per sobre de C

El CSS de l'exemple quedaria en:

div {
   position: relative;
   background: #fc0;
}
#b {
   position: absolute;
   width: 3em;
   height: 8em;
   background: #900;
}
#a {
   z-index: 1;
}

Quan Internet Explorer té activat el hasLayout actua com una caixa amb posició relativa a efectes d'apilament. Per tant, pot ser que una caixa aparentment aliena a l'apilament en aquest navegador s'hagi de tenir en compte.

Recursos relacionats

• Effect of z-index value to positioned elements
• How z-index works!