CSS z-index has no effect on the label for an input element -

i'd use the checkbox hack expand div show more text. hack requires checkbox input appear first in dom, elements affect coming after. i'd show div expanded behind label. had imagined enough set z-index of label appears above div:

html

<input type="checkbox" id="more" /> <label for="more">show more</label> <div>     <p>ipsum lorem , jazz</p> </div> 

css

input {     position:absolute;     clip: rect(0, 0, 0, 0);     z-index: 999; } input + label {     z-index: 999; } input + label::before {     content:"+";     padding-right: 0.5em;     font-family: monospace } input:checked + label::before {     content:"-"; } input ~ div {     height: 0;     padding-top: 1em;     background: #ffe;     overflow:hidden;     position: relative;     top: -0.4em; } input:checked ~ div {     height: auto; } 

however, no value of z-index seems have effect. understand there may different stacking contexts in html page. however, don't see how affects simple layout. removing position: absolute rule input element not remove problem, nor changing z-index of input element itself.

what wrong assumptions making?

jsfiddle

---

edit: @guy , @taxicala, i've got demo working: here's updated jsfiddle

z-index intended elements positioned absolute, relative , fixed:

input + label {     position: relative;     z-index: 999; }