[英]Z-index stacking order
考慮以下jsfiddle: http : //jsfiddle.net/dHaM8
HTML:
<div class="first"><img src="http://placekitten.com/g/200/300"/></div>
<div class="second"></div>
<div class="third"><p class="test"> test test test </p></div>
CSS:
.first img {position:fixed; top: 10; left: 10; z-index: 1}
.test {position:fixed; top: 10; left: 10; z-index: 10}
.first {
background-color: #a6a6a6;
height: 600px;
background-attachment: fixed;
background-image: url("http://placehold.it/1000x500");
}
.second {
background-color: #fff;
min-height: 500px;
z-index:2;
position:relative;
}
.third {
background-color: #ff0000;
min-height: 500px;
background-attachment: fixed;
position:relative;
z-index:3;
}
我想做的是:
小貓應該保持在div“ first”內,如果您查看CSS,這已經實現了。
但是,第三個div中的文本未顯示!
如果我將div設置為高於小貓的div,則文本將顯示在我不想發生的第一個div中。 我只希望它顯示在第三個div中。
請幫助。
給出位置:相對於<p>
標記。 見小提琴
.test {position:relative; top: 10px; left: 10px; z-index: 10}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.