如何使文本浮动在图像html css之上答案

【问题标题】：How to make text float on top of an image html css如何使文本浮动在图像html css之上
【发布时间】：2014-09-22 01:09:20
【问题描述】：

我有以下 html 代码使“底部”div 浮动在图像顶部。我在一个表格行上有 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;
}

正如您在图片中看到的，顶部图片文本也没有正确浮动在图片顶部。

【问题讨论】：

标签： jquery html css css-float css-position

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

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

【讨论】：

这个我试过了，还是不行，看上图的变化。
将 left: 0px 添加到 CSS 中，请参阅更新。如果不指定左侧位置，则默认为其当前左侧位置。或者将 id=bottom 元素放在 img 标签之前，这样它就会从最左边开始并将自身分层到图像上。
抱歉，当我发布答案时，图片没有意义。
您好，谢谢您的回答。当屏幕是一半大小时，此解决方案有效，但是当它是全屏时，它不起作用。我现在添加了一张新图片。
更新了我的答案，td 的样式必须以内容为中心，因此我们需要一个以图像为中心的包装器来锚定。

【解决方案2】：

使用这个 css

        #bottom{
          position: relative;
          margin-top: -60%;
        }

根据需要调整边距。

【讨论】：

感谢您的回答。唯一的问题是最顶部的图像仍然与文本不对齐。

【解决方案3】：

我建议不要使用绝对位置来让 img 与 div 重叠，而是建议使用 div 上的 background-image 属性。然后您需要做的就是将文本调整为在 div 中居中。

【讨论】：

【解决方案4】：

创建对象时，请分层考虑。（顶层最后加载。）

如果为文本和图像创建两个位置：绝对容器，则可以将文本“浮动”在图像上方。

.LogoWrapper{
	position:absolute;
	left:5px;
	top:3px;
	background-image:url("http://www.delaneysecurity.com/Images/Background/bg.png");
	width:275px;
	}

.LogoWord{
	font-size:30px;
	font-weight:bold;
	color:#F0F0F0;
	font-family: arial;
	position:absolute;
	left:20px;
	top:25px;
	}

<HTML>
  <BODY>
    <DIV CLASS="LogoWrapper">
	 <IMG SRC="http://www.delaneysecurity.com/Images/Images/logocircles.png"/>
    </DIV>
    <DIV CLASS="LogoWord">Delaney Security</DIV>
  </BODY>
</HTML>

【讨论】：