我正在为 input[type=range]
的阴影 DOM 元素编辑 CSS,我想扩展 slider slider 以覆盖下面的 div,为此,我必须将拇指的 position
设置为 fixed
。问题是,在下面必须低于拇指的 div 中,我有一些 div 具有 position: relative
(并且不能以不同的方式定位),以某种方式将它们放在前景中,覆盖拇指。
这是代码。但是我做了一个 jsFiddle更好地解释我的问题。
HTML
<input type="range" id="slider" />
<div id="container">
<div id="left"></div>
<div id="right">
<div id="content"></div>
</div>
</div>
CSS:
#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;
}
基本上,我希望黑色条覆盖黄色的 div,而不从该 div 中删除 position: relative
属性。这可能吗?
最佳答案
您需要指定 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;
}
fork 你的 fiddle here .
关于jquery - 将范围拇指扩展到相对定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15091186/