Html 范围输入似乎忽略了z索引

我正在尝试创建一个有点花哨的范围输入） 我发现很难设置样式，所以我决定最好的方法是为1）样式化的

和2）透明的

以下是一个例子：
样式化的

，仅适用于定位元素

只需将
的
位置设置为
相对位置
：

input {
  height: 40px;
  float: left;
  opacity: 0;
  z-index: 5;
  position: relative;
}


$。每个（$（'input'），函数（）{
var thumb=$（this.next（），
target=thumb.find（'span'），
change=函数（）{
html（this.value）；
css（'left'，'calc（'+this.value+'%-26px*'+（this.value/100））；
};
$（this）.on（'input change'，function（））{
css（“背景色”，“背景色”）；
change（），$（this）.off（'input change'，arguments.callee）。on（'input change'，change）；
});
})；
输入{
高度：40px；
浮动：左；
不透明度：0；
z指数：5；
位置：相对位置；
}
拇指分区{
背景色：rgba（0,102,153,0.75）；
高度：40px；
框大小：边框框；
位置：绝对位置；
文本对齐：居中；
填充顶部：10px；
宽度：26px；
z指数：2；
}
分区范围{
左：50%；
位置：绝对位置；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：75%；
颜色：白色；
高度：40px；
溢出：隐藏；
光标：指针；
背景：#cc3300；
/*旧浏览器*/
/*IE9 SVG，需要将“过滤器”条件重写为“无”*/
背景：url（数据：image/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIIA/PGO8C3ZNIHHTBG5ZPSJODHRWOI8VD3D3LNCZYLM9YZYD8YMDAWL3N2ZYIGD2LKDGGG9IJEWMCUIIGDMLLD0JVED0IMCAWIDEGMCHC2VYDMV3BC3BLY3R3RYXYBRP00IBM9UZSI+CIAGPGG8BMVHCKDYWYWYW5LKYKYW5LKYZZY2TCZ2TZ2VUZ2VUZ2VUZJJJJJJJJJJJJJJJ0IDV9IJ0IMV9V9IZZZZZZZZY2V9C）UiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjMzMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CIAGICA8C3RVCCBVZMZZZZZZQ9IJEWMCUIH9SB3I9I9IIMWDK5DaiHN0B3BHY2L0ET0IMPGOGIDWBLUGYR3JHLLBNQ+CIGPHJGLY3QGED00IMGIGE0IMCIGD2LKDK9I9IJJJKZZL9IJJJJJZZL9MCJJJJZZZL9JJJJJJJZZZL9JJJJJJJJZZZZL9M；
背景：-moz线性梯度（左，#cc3300 0%，#009900 100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%，#cc3300）、颜色停止（100%，#009900））；
/*铬，Safari4+*/
背景：-webkit线性梯度（左，#cc3300 0%，#009900 100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，#cc3300 0%，#009900 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（左，#cc3300 0%，#009900 100%）；
/*IE10+*/
背景：线性梯度（向右，#CC33000%，#009900 100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#cc3300'，endColorstr='#009900'，GradientType=1）；
/*IE6-8*/
}
输入[类型=范围]{
-webkit外观：无；
宽度：100%；
利润率：0.45px0；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：40px；
光标：指针；
}
输入[类型=范围]：-webkit滑块拇指{
边框：0px实心#000000；
高度：40px；
宽度：26px；
边界半径：0px；
光标：指针；
-webkit外观：无；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：40px；
光标：指针
}
输入[类型=范围]：-moz范围拇指{
边框：0px实心#000000；
高度：40px；
宽度：26px；
边界半径：0px；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：40px；
光标：指针；
背景：透明；
边框颜色：透明；
颜色：透明；
}
输入[类型=范围]：-ms thumb{
边框：0px实心#000000；
高度：40px；
宽度：26px；
边界半径：0px；
背景：#ffffff；
光标：指针；
高度：40px；
}

?%
你试过隐藏可见性吗？没有，但你看，问题已经解决了）是的，我一秒钟前就找到了（我刚刚删除了
浮动：左
并添加了
位置：绝对
，现在一切都好了。很抱歉问了这么愚蠢的问题(