Html div重叠不'；我每次都不工作 我有一个页面，其中包含一个字段用户输入表单，中间有15个随机定位的div，它们从数据库中提取内容。我已经设法让他们不重叠，但不能在中间的形式div。所以我用z-index让它们隐藏在它后面，如果它们碰巧重叠的话

我注意到的是，他们并不总是落后。有时它们确实隐藏在输入字段后面，而有时它们出现在输入字段前面

这是我目前掌握的代码：

在HTML代码中，我将动态数据php代码替换为硬编码文本，只是为了展示功能。

$（窗口）.load（函数（）{
var=15；
var min_x=50；
var max_x=900；
var min_y=0；
var max_y=700；
var填充面积=[]；
功能计算重叠（a1）{
var重叠=0；
对于（i=0；i
#给我秘密{
利润率最高：20%；
位置：相对位置；
}
.字{
位置：绝对位置；
字体大小：30px；
背景色：rgba（255255,0.5）；
不透明度：0.3；
z指数：9999；
}
.搜索框{
光标：自动；
宽度：500px；
高度：30px；
背景色：#d1d1；
}
#给我一些秘密{
z指数：10；
}
html，正文{
保证金：0；
身高：100%；
溢出：隐藏
}

测试随机单词。
给我给我给我？




（这完全是匿名的！）
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
这只是一个测试
在给出的工作示例中，我看不出问题所在（也就是说，对我来说，单词不与搜索重叠，但你确实说问题是间歇性的），但我假设javascript的某些东西设置的z索引高于导致问题的搜索框。serach盒上的z指数只有10，这相当低

我建议将此作为解决方案：

<div class='master-container'>
    <div class='background-with-moving-text'>
        <!-- all moving text elements -->
    </div>

    <div class='search-container'>
        <!-- all search box elements -->
    </div>
</div>

.master-container {
    position: relative; 
}

.background-with-moving-text {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 0;
}

.search-container {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}


.主集装箱{
位置：相对位置；
}
.带有移动文本的背景{
左：0；
位置：绝对位置；
排名：0；
z指数：0；
}
.搜索容器{
左：0；
位置：绝对位置；
排名：0；
z指数：1；
}

由于z-index工作方式的性质，子元素上的z-index集永远不能覆盖同级元素中的元素，同级元素的z-index高于原始父元素。因此，将单词容器设置为
0
，并将所有单词保持在其中；将搜索容器设置为
1
，并再次将所有相关元素保持在该范围内，我们可以保证单词容器中的元素不会与搜索容器中的元素重叠

CSS技巧，我敢肯定

这是一个例子。这里还有一些样式，以模拟方式添加颜色和位置，但是我们可以看到，所有z-index设置为10的单词都位于搜索容器中所有内容的后面，即使所有这些元素的z-index都设置为1

最后，为了使内部元素的定位工作，需要将它们都位于位置的主容器设置为除静态之外的其他位置（如果未设置，则为默认css位置值）。
代码太多，您应该只留下重要部分。先生，您震撼了整个房子！这个解决办法很有效。非常感谢。