Question

我有以下html代码，使'bottom'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;
}

正如您在图片中看到的那样，顶部图片文字也没有正确浮动在图像上方。

enter image description here

Answer 1

你需要使用position：relative to set window其中position：absolute将用于top，left，bottom和right。

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

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

Answer 2

使用此css

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

根据您的需要调整保证金。

Answer 3

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

Answer 4

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

如果为文本和图像创建两个位置：绝对容器，则可以＆＃34;浮动＆＃34;图像上方的文字。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: