html - Z-index 堆叠顺序

Question

考虑以下 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 中。

请帮忙。

Answer 1

给出位置：相对于<p>标签。见小提琴

.test {position:relative; top: 10px; left: 10px; z-index: 10}