Question

我有一个可移动的div如下：

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

javascript事件监听器功能包括以下内容：

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

rdiv是一个只包含文字的div，除宽度外没有任何样式。

我希望的是 - 叠加图像会弹出rdiv的左上角，覆盖文本。实际发生的情况是，叠加图像显示在文本下方，与文本后插入的块元素完全一样。给予rdiv绝对或相对的定位并没有帮助。

是否可以将叠加div显示在左上角文本的顶部？实际上没关系 - 只是想通了如果rdiv定位为相对而叠加是绝对的，它就有效。问题可以删除。

Answer 1

如果您要将孩子附加到rdiv，那么在rdiv上设置CSS规则就不会有太大作用。它的孩子将根据自己的CSS规则进行布局。如果您希望overlay位于其父容器的左上角，则需要更改overlay的CSS，而不是rdiv：

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

（......或类似的东西）。您使用overlay.style.display = '';走在正确的轨道上，但我不认为您想在此处设置展示属性。

如何让HTML div覆盖其父div中的文本

1 个答案: