2015-06-19 89 views
2

我想使用the checkbox hack來擴展div以顯示更多文本。黑客要求複選框輸入首先出現在DOM中,並且要影響其後續的元素。我想展示要在標籤後面展開的div。我想象,這將是足以設置label,使其出現上述divz-indexCSS 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。

我在做什麼錯誤的假設?

jsfiddle


編輯:感謝@Guy和@taxicala,我已經得到了演示工作:這裏是一個updated jsfiddle

回答

5

z-index是用於定位爲absoluterelativefixed元素:

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

當前您的labelposition: static,將其更改爲position: relative,以便應用z-索引。

Updated Fiddle