z指数不起作用

Question

我试图使这些黑色箭头重叠在白色div上，但它们不会移动。我将position: relative和不同大小的z-index应用于div，但由于任何原因，它们都不起作用。

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

我已经看了很多很多关于z指数的问题和回答，而不是定位在各自之上，但没有其他解决方案起作用。我试过了:

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

这些都没用。

我如何使这些箭头工作?

这是我的jsFiddle。

箭头的CSS从Line 141和146开始

Answer 1

我去看了你的代码，你的问题是在col-12类中使用了overflow: auto

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

如果你删除它，你可以看到div上的箭头，如你所愿

Answer 2

您遇到的问题是由于您正在使用的容器有溢出集。为了解决这个问题，你可以做的是改变它，或者给#nav li:after一个position:fixed，然后相应地改变top和left的值。

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