Question

在投反对票或将问题重复之前，请先阅读问题。

我遇到了将一个div放在另一个div下的问题。我知道让人们在这里问过这个问题，我已经阅读了所有这些问题并尝试了所有内容，但是没有一个能为我工作。

每天都有position: relative给div，然后给一个更高的z-index和另一个更低的<body> <div class="conteiner">blah blah blah</div> <div id="particle-js"></div> </body>。他们都没有为我工作。所以，我来这里寻求帮助。

在我的项目（http://loadtest.isaumya.com/）中，我有2个div，即

<div id="particle-js"></div>

我想把{{1}}放在容器后面，但没有任何结果。所以请帮忙。

Answer 1

你订购的很糟糕：

<div class="container">...</div>
<div id="particles-js">...</div>

反转职位：

<div id="particles-js">...</div>
<div class="container">...</div>

是有道理的，因为你希望你的全屏画布粒子自然比后者#container低z-index。优先规则。

还会将此样式添加到particle-js元素：

#particles-js{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}

如果以上仍然没有帮助（它应该）添加：

.container {
    position: relative;
    z-index: 1;
}

制作canvas元素display:block;

结果图片：

enter image description here

Answer 2

它只是一个非常简单的概念，您需要记住css中的位置

相对定位元素相对于其法线定位位置

绝对位置元素相对于第一个定位父元素，其位置不是静态。

JSFiddle

这就是你如何解决这个问题：

<body>
<div class="container">blah blah blah</div>

<div id="particle-js"></div>
</body>

和css

div {
    width: 100px;
    height: 100px;
}

.container {
    position: absolute;
    background-color: blue;
    z-index: 1;
}

#particle-js {
    position: absolute;
    background-color: red;
}

使z-index更高，以便在顶部显示您希望显示的元素

将div放在另一个div上的问题

2 个答案: