CSS z-index对输入元素的标签没有影响

Question

我想使用复选框hack来扩展div以显示更多文本.黑客攻击要求复选框输入首先出现在DOM中,其中包含要影响的元素.我想展示要在标签后面扩展的div.我想象,这将是足够的设定z-index的label,使其出现上面的div:

HTML

<input type="checkbox" id="more" />
<label for="more">Show more</label>
<div>
    <p>Ipsum lorem and all that 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;
}

但是,z-index的值似乎没有任何影响.据我所知,HTML页面中可能存在不同的堆叠上下文.但是,我没有看到这对我的简单布局有何影响.删除元素的position: absolute规则input不会消除问题,也不会更改input元素本身的z-index .

我正在做出什么错误的假设？

的jsfiddle

---

编辑:感谢@Guy和@taxicala,我有演示工作:这是一个更新的jsfiddle

Answer 1

z-index适用于定位为absolute,relative和的元素fixed:

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