Adam Adam - 1 year ago 97
CSS Question

floated text above absolute positioned image

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

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'>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download