范围输入似乎忽略了z-index

Question

我试图创建一个有点花哨的范围输入） 我发现很难对其进行样式设置，因此我认为最好的方法是创建单独的图层，用于1）风格化<div>和2）透明<input type="range">

以下是示例：
风格化<div有z-index: 2;，<input type="range">有z-index: 5; opacity: 0;
但无论如何，当我尝试拖动范围的拇指时，我实际上只是选择假拇指中的文字）

以下是live example

如何解决这个问题？

更新：here是解决问题的示例。

Answer 1

z-index仅适用于定位元素，因此必须为absolute，relative或fixed。 只需将<input>的{​​{1}}设置为position：

即可

position:relative;

JSFiddle Demo