Question

我的css出了问题。如果我想要一个标签重叠div我只需设置两个位置：绝对和顶部：0px，左：0px。这对我来说很正常，但在下面的例子中，我不知道如何在滑块上方或透明滑块下设置文本。我希望你能帮我解决这个问题。

<div data-role="collapsible-set">
    <div data-role="collapsible">
         <h3>
                <input class="slider" type="range" value="0" min="0" max="100" id="slider1" step="5" />
                <p id="rowlabel1">Test</p>
            </h3>

    </div>
</div>

我的css：

#rowlabel1 {
    position: absolute;
    z-index: 1;
}
#slider1 {
    position: absolute;
    z-index: 0;
}

http://jsfiddle.net/rHFS5/

Answer 1

这是一种方法。我已经改变了一下html，但实质是一样的。

<head>
<style type="text/css">
    #rowlabel1 {
        position: relative;
        z-index: 1;
    }
    #slider1 {
        position: relative;
        clear: both;
        z-index: 0;
    }
    .label {
        text-align: center;
        width: 100%;
    }
    .framer {
        width: 200px;
    }
</style>
</head>
<body>
<div data-role="collapsible-set">
    <div data-role="collapsible" class="framer">
         <h3>
            <div class="label">
                <span id="rowlabel1">Test</span>
            </div>
            <div>
                <input class="slider" type="range" value="0" min="0" max="100" id="slider1" step="5" />
            </div>
         </h3>
   </div>
</div>
</body>

HTH

如何使用css将标签设置在“范围”滑块后面

1 个答案: