Apilament de caixes relatives i absolutes
Publicat el 26/07/2007
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.
Comentaris