Šuplík Honzy Hučína

Bug IE position:relative bez nastaveného rozměru

Pokud máte v HTML stránce blok s nastavenou CSS vlastností position:relative a nenastavíte tomuto bloku výšku ani šířku, Internet Explorer v tomto bloku špatně počítá souřadnice. Takže kdybyste chtěli do takového bloku dát další blok pozicovaný absolutně, budou se v různých verzích IE dít různě zajímavé věci. Chyba už byla popsána pro IE 5.0, ale bohužel na rozdíl od tvrzení v článku se objevuje i v IE 6.0.

Bug nastává v tomto případě:

#vnejsi {position:relative;border:1px solid lime;padding:20px}
#vnitrni {position:absolute;left:0px;bottom:0px;border:1px solid red}
...
<div id="vnejsi">
Obsah omezujícího bloku
<div class="vnitrni">Levý dolní roh</div>
</div>

Absolutně pozicovaný blok se chová nestabilně a nepředvídatelně, jeho pozici ovlivňuje spousta věcí i mimo vnější blok.

Řešení chyby spočívá v nastavení rozměru relativně pozicovanému bloku, tedy šířky nebo výšky.

Prohlédněte si příklad.