如何在不使用 z-index 和 position: absolute 的情况下覆盖另一个 div 上的 div？

Question

我有两个

元素，如下所示的代码。我想在"firstDiv"上叠加"secondDiv"。我的HTML模板将会动态加载，因此无法确定div元素在屏幕上的位置。我不能使用z-index和position: absolute，因为这会干扰整个布局。

<div id="firstDiv" style= "height=54px;width=96px"></div>
<div id="secondDiv"></div>

我该如何实现这个目标？

- GirishK

---

你说你不知道屏幕上div的位置。我假设你知道第二个在第一个之后？如果是这样，并且它们具有相同的z-index，那么它不会自动覆盖第一个吗？ - Druckles

不，它不会。第二个Div显示在第一个Div下面。 - GirishK

我假设您已经应用了某些 CSS 样式到每个 div 上了，能否请提供一下呢？ - Druckles

Answer 1

首先，如果您将定位元素的 z-index 设置为-1，则它将位于其他内容下方。您不需要绝对定位，相对定位也适用于此，这意味着它仍然处于文档流中，并且在与其重叠的其他对象下方。 这篇文章是您想要阅读的有关重叠内容细节的文章。 它侧重于z-index，但也讨论了层叠顺序，这是您可能考虑利用的东西。

- ace

Answer 2

试一下这个

<div id="firstDiv" style="height:150px;width:150px">Hello</div>
<div id="secondDiv" style="position:absolute;height:50px;width:50px;background:rgb(255,0,0);left:9px;top:20px;">how r u</div>

- Pratik

---

您的代码在示例中可以工作。但是将其嵌入我的应用程序似乎不可能，因为我不知道我的div的确切位置。因此，我无法以任何方式使用“top:20px”。我正在使用动态生成的HTML模板。 - GirishK

Answer 3

将两个 div 放在另一个 div 中，该 div 的 position 设置为 relative，然后您可以使用绝对定位和 z-index，并且可以通过 JavaScript 控制可见性。

- Tomas Kohl