Z-index stacking order

Question

Consider the following 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;
 }

What i am trying to do is:

The kitten should stay fixed within the div "first" which is already achieved if you look at the CSS.

However, the text in the third div is not displaying!

If i set the div higher to that of the kitten, the text will be displayed in the first div which i don't want to happen. I only want it to be displayed in the third div.

Help please.

Answer 1

Give position: relative to the <p> tag. See fiddle

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