Ako získať kód HTML div pre prekrytie textu v jeho nadradenej divízie, css - pozícii, z - indexu

Mám pohyblivý div takto:

<div id=overlay style="display: none; z-index: 99; position: relative; top: 0px; left: 0px;"><img src="/images/someimage.gif"></div>

Funkcia poslucháča javascriptovej udalosti zahŕňa:

var overlay = document.getElementById("overlay");
rdiv.appendChild(overlay);
overlay.style.display = "";

rdiv je div, ktorý obsahuje iba text bez štýlu okrem šírky.

Dúfal som, že to bude - obraz prekrytiapop-up v ľavom hornom rohu rdiv, prekrytie textu. Čo sa v skutočnosti deje, je, že obrázok prekrytia sa zobrazí pod textom presne tak, ako by ste očakávali pre element bloku vložený za text. Dať rdiv postavenie absolútnej alebo relatívnej nepomôže.

Dá sa urobiť, aby sa prekrytie zobrazilo nahornej časti textu v ľavom hornom rohu? Vlastne nevadí - len prišiel na to, že ak je rdiv umiestnený relatívne a prekrytie je absolútne, funguje. Otázka by mohla byť odstránená.

odpovede:

Ak ste znovu pripojili dieťa rdiv, potom nastavenie pravidiel CSS rdiv Jej deti budú rozmiestnené podľa vlastných pravidiel CSS overlay Ak chcete byť v ľavom hornom rohu nadradeného kontajnera, musíte zmeniť CSS pre overlay, nie rdiv:

var overlay = document.getElementById("overlay");
rdiv.appendChild(overlay);
overlay.style["z-index"] = 10;
overlay.style["position"] = "absolute";
overlay.style["top"] = 0;

(... alebo niečo podobné). Boli ste na správnej ceste overlay.style.display = ""; ale nemyslím si, že chcete nastaviť vlastnosť zobrazenia tu.