CODEWITHSUNDEEP
jquerycssjquery-mobile
TobiasW
TobiasW

Reputation: 891

How to set a label centered behind a "range" slider with css

I got a problem with my css. If I want a label to overlap a div I just set both position:absolute and top: 0px , left: 0px. That works normally for me, but in the following case I have no idea how to set my text above the slider or under a transparent slider. I hope you can help me with this problem.

<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>

My css:

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

http://jsfiddle.net/rHFS5/

Upvotes: 0

Views: 551

Answers (1)

James Jensen
James Jensen

Reputation: 731

Here is a way to do it. I've changed the html a bit, but the essence is the same.

<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

Upvotes: 1

Related Questions