Adam Adam - 1 month ago 10
CSS Question

floated text above absolute positioned image

How can I put a floated text above an absolute positioned image? The property

z-index
does not seem to work here.

Example: (jFiddle)



.box {
z-index: 1;
background-color: red;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px
}
.text {
float: left;
z-index: 2;
}

<div style='position:relative'>
<span class='text'>Hello</span>
<div class='box'>
</div>
</div>




Answer

Just add position: relative; to your text's CSS.

Just as a side-note you'll need to keep the z-index properties you've put too.

Or alternatively (but I wouldn't suggest it), add z-index: -1; to the box, and remove z-index from the text.