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

【问题标题】：floated text above absolute positioned image绝对定位图像上方的浮动文本
【发布时间】：2016-10-12 21:02:34
【问题描述】：

如何在绝对定位图像上方放置浮动文本？ 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>

【问题讨论】：

简单地将 z-index 赋予 box 类中的 -1

标签： html css css-float css-position

【解决方案1】：

只需将position: relative; 添加到文本的 CSS 中即可。

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

或者（但我不建议这样做），将 z-index: -1; 添加到框中，并从文本中删除 z-index。

【讨论】：

【解决方案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>

【讨论】：

@Adam 添加 z-index: 999;和位置：相对；到文本。

【解决方案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;
    }

【讨论】：