Question

我有一个滑块，我想用HTML和CSS在它上面放一个小图标，但两者都是绝对位置，滑块隐藏了图标。

图标的CSS代码是：

#nav {  
    position:absolute;
    left: 49%;
    top: 89%;
}

请注意，当我从javascript文件中删除滑块时，它会显示我想要的图标，但滑块会停止，那么图标如何放在滑块上

Answer 1

为此导航图标添加z-index。像下面一样更新你的CSS。

#nav {  
position:absolute;
left: 49%;
top: 89%;
z-index:2;
}

Answer 2

这就是你所需要的 -
http://jsfiddle.net/LUQjb/3/

HTML-

<div class="outerdiv">
<div class="youricon">
</div></div>

CSS-

.outerdiv{  
    position:relative;  
    width:400px;  
    height:400px;  
    background-color:black;  
}  

.youricon{  
    position:absolute;  
    width:200px;  
    height:200px;  
    background-color:red;  
    top:50px;  
    left:50px;  
}

Answer 3

具有预定义z-index属性的滑块。因此，您需要为图标添加更高的z-index属性。

#nav {  
    position:absolute;
    left: 49%;
    top: 89%;
    z-index:/* As per you requirment */;
}

Answer 4

将更多Z-index应用于小图标，而不是滑块图像！

.slider{
 z-index: 100; }

.small-icon{ z-index: 200; }

Z-index的所有技巧！

如何使用CSS将HTML元素放在另一个上面

4 个答案: