html元素的排列

Question

我正在一个页面中工作，该页面包含两个在 html 上相互冲突的不同插件。一个插件 arange divs absolute。另一个插件制作了一个定制的下拉列表。问题是.. 如果我将选择框放在一个排列的 div 中。它下面还有另一个排列的div。顶部 div 内的选择框将位于底部 div 的后面。我希望这个 div 位于另一个块的顶部。我不想以相反的顺序从下到上重新排列所有 z 索引。

我一直在寻找这个问题的（css）解决方案。因为系统在很大程度上依赖于两个插件（在每个页面上实现。）所以我不能只拿走这两个插件中的一个。我希望任何人都可以给我一个解决这个问题的方法

这是我的意思的一个小例子：

#div1 {
    width:500px;
    border:1px solid black:
    height:150px;
    max-height:150px;
    background-color:green;
    left: 50px;
    top:50px;
    position:absolute;
    overflow:visible;
    display:block;
    z-index:1;
    color:white;
}

#div2 {
    position: relative;
    left:200px;
    width:100px;
    background-color:blue;
    border: 1px solid black;
    height:500px;
    z-index:999;
    color:white;
}

#div3 {
    position:absolute;
    top:250px;
    width:500px;
    left:50px;
    background-color:red;
    height:200px;
    z-index:3;
    color:white;
}

<div id="div1" >
Top div
    <div id="div2">This one should be on top</div>
</div>
<div id="div3">
	Bottom div
</div>

Answer 1

如果您只是从 #div3 中删除 z-index 怎么办？当我这样做时，蓝色的#div2 出现在红色的上方。

这就是你要找的吗？