Jquery 如何在jqm RangeSloider和sliderthumb之间获得标签?
我想我的标签之间的滑块和滑块拇指,这样我可以节省尽可能多的屏幕空间。现在是我的问题,标签高于一切,我不能用z索引修复它 HTML: 我的代码的完整示例如下:请尝试以下方法: CSS: HTML:Jquery 如何在jqm RangeSloider和sliderthumb之间获得标签?,jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,我想我的标签之间的滑块和滑块拇指,这样我可以节省尽可能多的屏幕空间。现在是我的问题,标签高于一切,我不能用z索引修复它 HTML: 我的代码的完整示例如下:请尝试以下方法: CSS: HTML: 试验 那你到底想要什么呢???目前我的标签在拇指上方,所以你不能点击拇指。我希望标签位于拇指下方,但位于滑动条上方不幸的是,使用范围滑块无法实现这一点。 <div class="container"> <div class="slider"> <
试验
那你到底想要什么呢???目前我的标签在拇指上方,所以你不能点击拇指。我希望标签位于拇指下方,但位于滑动条上方不幸的是,使用范围滑块无法实现这一点。
<div class="container">
<div class="slider">
<label for="slider1" class='sliderlabel'>Test</label>
<input type="range" id='slider1' min="0" max="100" data-role="none">
</div>
</div>
.sliderlabel {
z-index: 1;
color: white;
left: 35%;
position: absolute;
}
input[type="range"]::-webkit-slider-thumb {
z-index: 2;
-webkit-appearance: none !important;
width: 20px;
height: 20px;
background-color: #579e81;
border-radius: 30px;
/* box-shadow: 0px 0px 3px #3c6d59;*/
transition: all 0.5s ease;
}
.label {
position: absolute;
margin-top: 10px;
margin-left: 100px;
z-index: 2;
}
#slider1 {
position: relative;
z-index: 1;
}
.ui-btn {
z-index: 3!important;
background-color: red!important;
}
<div data-role="page">
<div data-role="content">
<div class="label">
TEST
</div>
<div>
<input class="slider" type="range" value="0" min="0" max="100" id="slider1" step="5" />
</div>
</div>
</div>