Question

我具有以下 HTML结构：

<div>
    <div class="expandable">
        <div class="custom-select"><ul><li></li></ul></div>
    </div>
</div>
<div>
    <div class="expandable">
        <div class="custom-select"><ul><li></li></ul></div>
    </div>
</div>
<div>
    <div class="choice-select">
        <div class="custom-select"><ul><li></li></ul></div>
    </div>
</div>

重复“可扩展” div。
“自定义选择” div可见点击。
“选择选择”位于所有可扩展div的底部，包含另一个带有按钮的选择下拉列表

具有以下样式：

.expandable {
    position: relative;
    z-index: 10;
}
.custom-select {
    position: absolute;
    z-index: 9999;
}

我的问题是这样

“自定义选择”随处可见，并且具有很高的z索引9999。即使在同一个div中使用了多个“自定义选择”，在其余div上仍然可以看到被点击（展开）的一个并在同一父div中选择它。
我给“可扩展” div的z索引设置为10，以便当单击“自定义选择”并与“选择-选择”重叠时，它仍然可见且可点击。
但是，由于“可扩展”的div都具有相同的z-index，并且可以有N个“可扩展”的div，因此单击“自定义选择”时，如果碰巧它会扩展为同级“可扩展” div被削减。它隐藏在下一个“可扩展” div内容的后面。

我该怎么做才能确保“自定义选择”始终可见？我还尝试通过将“ expandable” div的不透明度设置为0.99，但这没有用。有小费吗？

一些指示性代码：https://codepen.io/imgr8/pen/bzOrbY

Answer 1

我要回答我自己的问题。我只是在悬停时才在兄弟父级上添加了z-index。那解决了。谢谢您的帮助！

嵌套div的z索引

1 个答案: