jquery - 如何使文本 float 在图像 html css 之上

Question

我有以下 html 代码使“底部”div float 在图像的顶部。我在一个表行上有 3 张图片。

<td>
     <img src="adele.jpg" alt="Adele">
     <div id="bottom">
        <h4 class="topText">ALBUM</h4>
        <h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
    </div>
</td>

这是我的CSS:

#bottom{
  position: absolute;
  display: inline-block;
  bottom: 0px;
  left:0px;

}

#positionAnchor {
   position: relative;
}

同样如您在图片中所见，顶部图片文本也未正确 float 在图片上方。

Answer 1

您需要使用 position:relative 来设置窗口，其中 position:absolute 将用于顶部、左侧、底部和右侧。

<td >
     <div id="positionAnchor">
     <img src="adele.jpg" alt="Adele">
     <div id="bottom">
        <h4 class="topText">ALBUM</h4>
        <h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
    </div>
    </div>
</td>

#bottom{
  position: absolute;
  display: inline-block;
  bottom: 0px;
  left: 0px;
}
#positionAnchor {
 position: relative;
 display: inline-block;
 text-align:center;
}

否则它将基于浏览器屏幕而不是父标签进行定位。