我想使用the checkbox hack來擴展div以顯示更多文本。黑客要求複選框輸入首先出現在DOM中,並且要影響其後續的元素。我想展示要在標籤後面展開的div。我想象,這將是足以設置label
,使其出現上述div
的z-index
:CSS z-index對輸入元素的標籤沒有影響
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值指數似乎有任何影響。我明白there may be different stacking contexts in an HTML page。但是,我不明白這是如何影響我的簡單佈局的。刪除input
元素的position: absolute
規則不會消除該問題,也不會更改input
元素本身的z-index。
我在做什麼錯誤的假設?
編輯:感謝@Guy和@taxicala,我已經得到了演示工作:這裏是一個updated jsfiddle