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

Question

我想使用the checkbox hack展开div以显示更多文字。黑客攻击要求复选框输入首先出现在DOM中，其中包含要影响的元素。我想展示要在标签后面扩展的div。我曾想过设置z-index的{​​{1}}就足以让它显示在label上方

HTML

div

CSS

<input type="checkbox" id="more" />
<label for="more">Show more</label>
<div>
    <p>Ipsum lorem and all that jazz</p>
</div>

然而，z-index的值似乎没有任何影响。我理解there may be different stacking contexts in an HTML page。但是，我不知道这会如何影响我的简单布局。删除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; } 元素的position: absolute规则不会消除问题，也不会更改input元素本身的z-index。

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

jsfiddle

编辑：感谢@Guy和@taxicala，我已经让演示工作了：这里是updated jsfiddle

Answer 1

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

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

Answer 2

目前，您的label为position: static，请将其更改为position: relative，以便应用z-index。

Updated Fiddle