z-index拒绝工作

时间:2015-09-01 03:48:51

标签: html css

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

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

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

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

这些都没有奏效。

如何使这些箭头有效?

这是我的jsFiddle

箭头的CSS从Line 141146开始。

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

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

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