Wie bekomme ich HTML div um den Text in seinem Elternteil zu überlagern - html, css-position, z-index

Ich habe ein bewegliches Div wie folgt:

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

Eine JavaScript-Ereignis-Listener-Funktion enthält Folgendes:

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

rdiv ist ein div, das nur Text enthält, ohne Formatierung außer width.

Was ich gehofft hatte - das Overlay-Bild würdePop-up in der oberen linken Ecke von RDIV, überlagert den Text. Was tatsächlich passiert, ist, dass das Overlay-Bild genau so unter dem Text erscheint, wie Sie es für ein nach dem Text eingefügtes Blockelement erwarten würden. Rdiv eine Positionierung von absoluten oder relativen geben hilft nicht.

Kann es gemacht werden, um das Overlay div erscheinen zu lassen?Oben im Text in der oberen linken Ecke? Eigentlich egal - hat nur herausgefunden, dass wenn rdiv relativ positioniert ist und Overlay absolut ist, es funktioniert. Frage könnte gelöscht werden.

Antworten:

Wenn du ein Kind anhängst rdiv, dann CSS-Regeln setzen rdiv Ich werde nicht viel tun. Seine Kinder werden nach ihren eigenen CSS-Regeln ausgelegt werden. Wenn Sie wollen overlay Um in der oberen linken Ecke des übergeordneten Containers zu sein, müssen Sie das CSS für ändern overlaynicht rdiv:

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

(...oder etwas ähnliches). Du warst auf dem richtigen Weg mit overlay.style.display = ""; aber ich glaube nicht, dass Sie die Anzeigeeigenschaft hier einstellen wollen.