schwebender Text über dem absolut positionierten Bild

Question

Wie kann ich einen schwebenden Text über ein absolut positioniertes Bild setzen? Die Eigenschaft z-index scheint hier nicht zu funktionieren.

Beispiel: (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 1

Fügen Sie einfach position: relative; zu CSS Ihren Text ist.

Nur als eine Randnotiz müssen Sie die Z-Index-Eigenschaften behalten, die Sie auch gesetzt haben.

Oder alternativ (aber ich würde es nicht vorschlagen), fügen Sie z-index: -1; in die Box, und entfernen Sie Z-Index aus dem Text.

Answer 2

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

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

Answer 3

Nur Position:Relative Zugabe in Ihrem Code ausarbeitet:

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

.text{ 
    float:left; 
    z-index: 2; 
    color: black; 
    position: relative; 
    }