我正在为input[type=range]的阴影DOM元素编辑CSS，我想扩展滑块以覆盖下面的div，为此，我必须设置{{1}拇指为position。问题是，在下面的div必须低于拇指我有一些div fixed（并且不能以不同的方式定位），它以某种方式将它们放在前景中，覆盖拇指。
这是代码。但是我做了一个jsFiddle来解释我的问题。
position: relative<input type="range" id="slider" />
<div id="container">
<div id="left"></div>
<div id="right">
<div id="content"></div>
</div>
</div>
基本上，我希望黑条覆盖黄色div，而不从该div中删除#slider {
width: 400px;
-webkit-appearance: none;
background: red;
height: 30px;
}
#slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 85px;
background: black;
position: fixed;
top: 10px;
left: 120px;
}
#container {
width: 400px;
}
#left {
width: 100px;
height: 50px;
background: blue;
float: left;
}
#right {
background: green;
width: 300px;
height: 50px;
}
#content {
position: relative;
width: 50px;
height: 25px;
background: yellow;
left: 100px;
top: 10px;
}
属性。这可能吗？
答案 0 :(得分：1)
您需要指定z-index来更改位于static以外的其他元素的自然堆叠顺序。
所以我在这里为z-index添加了值1：
#slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 85px;
background: black;
position: fixed;
top: 10px;
left: 120px;
z-index: 1;
}
分叉你的小提琴here。
答案 1 :(得分：0)
将位置设置为相对适合我。
用问题
启动css input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 30px;
width: 15px;
border-radius: 0px;
background: #004687;
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.2px;
z-index:5;
}
结束css：
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 30px;
width: 15px;
border-radius: 0px;
background: #004687;
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.2px;
z-index:5;
position:relative;
}