Internet Explorer - špatné zobrazování z-index objektu a formulářových prvků

Po dlouhé době jsem se konečně pustil trošku do AJAXu a pro svůj web www.realista.cz jsem vytvořil "našeptávač", který nabízí možná města při zadávání adres. Tehdy jsem narazil na tento problém.

Popsaná situace vypadá následovně:

Vyzkoušet si to můžete na tomto souboru ie_z-index.html.

Řešení je docela jednoduché a našel jsem jej v jedné diskusi na internetu, která se sice týkala trochu odlišné situace, ale v tomto případě funguje stejně.

Jde o to nastavit nějaký z-index (třeba 1) na objekty, v kterých je vnořený náš absolutní objekt, a které jsou na stejné úrovni jako objekty, které nám překrývají náš objekt. V mém případě je to řádek a fieldset.

Ukázka části kódu:

/* vynecháno */
<fieldset style="z-index:1">
    <legend>První část</legend>
    <div class="line" style="z-index:1"><label>První vstupní pole:</label><input type="text" size="50" maxlength="50" />
        <div id="abs">Absolutně pozicovaný blok<br />se z-index = 10</div></div>
    <div class="line"><label>Druhé vstupní pole:</label><input type="text" size="50" maxlength="50" /></div>
</fieldset>
/* vynecháno */

Pozn.: Jiné řešení je také umístit náš absolutní objekt hierarchicky výš než ty objekty, které jej překryjí. Ale většinou potřebujeme absolutní pozicování určovat od nadřazeného relativně pozicovaného objektu (aby byl na stejném místě v různých prohlížečích).

Po aplikaci z-indexu výsledek vypadá takto:

Ukázkový kód je v souboru ie_z-index_fix.html.

Pozn.: Bohužel se tímto způsobem nevyřeší chyba Internet Exploreru 6 (v 7čce je již opravena), kdy se pomocí z-indexu nedá překrýt formulářový prvek select. Pro tuto situaci se používá řešení, kdy se pomocí JavaScriptu vloží iframe.

Internet Explorer 7 a problém s funkcí getElementById

Zároveň, když jsem objevil výše popsaný problém, jsem narazil ještě na jednu chybu Internet Exploreru (otestoval jsem pouze ve verzi 7). Jde o to, že jsem měl na stránce dva formuláře se stejným prvkem select. Oba tyto selecty měly stejné jméno (což by snad neměl být problém), ale ten druhý měl ještě nastaveno ID na stejnou hodnotu jako jméno. V JavaScriptu jsem pomocí getElementById adresoval ten druhý prvek, ale v IE7 jsem dostával zpět ten první, kdežto v FF bylo vše OK. Vyřešil jsem to tak, že jsem druhému prvku dal jiné ID a vše se začalo chovat dobře.