Question

我有两个元素，一个导航div和一个滑动控制器div，但我不能让导航div与幻灯片控制器div重叠。这是我的代码（1.导航代码2.幻灯片控制器代码）：

nav {
    position: absolute;
    width: 200px;
    height: 100vh;
    background-color: white;
    margin-top: -20px;
    z-index: 1;
}

nav ol {
    margin-top: 100px;
    width: 190px;
}

nav li{
    display: block;
    margin: 0px;
    padding: 15px;
    position: relative;
    width: 170px;
    border-bottom: 1px solid #bfbebe
}

nav a {
    color: black;
}


#Slider_Control {
    position: absolute;
    z-index: 2;
    width: 210px;
    height: 40px;
    background-color: #d51200;  
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);  
    margin-top: 574px;
}

.CircleControl {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: white;
    border-radius: 100%;
    margin-right: 5px;
    margin-left: 5px;
}

#Circles {
    text-align: center;
    height: 40px;
    line-height: 40px;
}

#Arrow_1, #Arrow_2 {
    position: absolute;
    width: 20px;
    height: 0 auto;
    margin-top: -40px;
    padding: 10px;
    background: #ed1602
}

#Arrow_2 {
    margin-left: 170px;
    transform: rotate(180deg);
}

#Triangle_1 {
    width: 0; 
    height: 0; 
    border-bottom: 14px solid transparent;
    border-left: 20px solid #7d0b00;
    margin-left: 210px;
    margin-top: -14px;
}

#Triangle_2 {
    position: absolute;
    width: 0; 
    height: 0; 
    border-bottom: 14px solid transparent; 
    border-right:20px solid #7d0b00; 
    margin-top: -14px;
    margin-left: -20px;
}

我希望有人可以解决滑块控制器与nav div重叠的问题，这可能是另一种方式。

（如果您需要更多信息，请立即告诉我）

Answer 1

从我所看到的情况来看，如果你想让nav标签与#Slider_Control重叠，因为它们都有位置：绝对，你所要做的就是在你的导航标签上放一个更高的z-index。现在你的导航是1，你的Slider_Control是2，所以Slider_Control总是在最顶层。

但同样，我可能错了，提供这方面的HTML背景会有所帮助。

无法使div与另一个特定div

1 个答案: