z-index拒绝工作

Question

我试图让这些黑色箭头与白色div重叠，但它们不会让步。我将position: relative和不同大小的z-index应用于div，但它们不会因任何原因而起作用。

我最幸运的是将position: absolute添加到<div class="col-8">元素，这导致箭头重叠但打破了该div的定位。

我已经看过很多很多关于z-index的SO问题和回答没有定位在相应的上面，但没有其他解决方案有效。我试过了：

• 在父元素上使用position: relative
• 将不透明度更改为opacity: .99

这些都没有奏效。

如何使这些箭头有效？

这是我的jsFiddle。

箭头的CSS从Line 141和146开始。

Answer 1

我去看了your code，你遇到的问题是在col-12课程中使用overflow：auto。

.col-12 {
float: left;
overflow: auto;}

如果删除它，您可以根据需要在div上看到箭头。

Answer 2

您遇到的问题是由于您使用的容器有溢出设置。要解决此问题，您可以做的是更改它，或者提供#nav li:after一个position:fixed，然后相应地更改top和left值。

第二种方法是不要使用overflow: auto上的#header-content。