在绝对定位图像上方浮动文本

Question

如何将浮动文本放在绝对定位图像上方？属性z-index似乎不起作用。

示例：（jFiddle）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将z-index: -1;添加到文字的CSS中即可。

就像旁注一样，你需要保留你所放置的z-index属性。

或者（但我不建议），在框中添加script.sh，并从文本中删除z-index。

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

只需在代码中添加Position:Relative即可：

 .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;
    }