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

Question

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

示例： (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

只需将 position: relative; 添加到您文本的 CSS。

作为旁注，您还需要保留已放置的 z-index 属性。

或者（但我不建议这样做），将 z-index: -1; 添加到框中，并从文本中删除 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;
    }

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

floated text above absolute positioned image

html

css

css-position

css-float