如何在没有绝对定位或将图像设置为背景的情况下将文本放置在图像上

我过去总是一有桌子就表演这样的特技。非常难看,可能会让您运行它的任何验证器感到尴尬:重叠的表单元格。但在大多数浏览器中都可以使用,甚至在没有css的情况下也可以使用。

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

我知道,我应该为此投反对票。

如果使用绝对定位,则应同时指定 left top 属性。另外,你应该设置 position:relative; 在某个父元素上使其成为图层,以便绝对定位使用该元素作为原点。如果不指定原点,它可能是窗口或其他元素,并且不知道绝对定位的元素最终会出现在哪里。

还有其他一些替代方法可以将元素放置在彼此的顶部,每个元素都有自己的限制。

可以使用相对定位使文本显示在图像顶部:

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

可以在另一个元素中使用浮动元素将文本放置在图像顶部:

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="..." alt="" />

这也给了你一致的字体,过滤等等。

您可以尝试设置负边距。除了最不复杂的布局外,这在所有布局中都很难维护。有效的负边距将元素“拉”到该方向。

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>

假设你有一个父div,里面有一个图像和段落,给它们三个的相对位置,给孩子们一个z-index,给文本一个21。文本将显示在图像上方。您可以使用“顶部、左侧、右侧或底部”调整文本

CSS
#learning{
margin: 0px;
padding:0px;
height: auto;
width: 100%;
position: relative;

}
#learning>img{
width:inherit;
height:inherit;
margin: 0px;
display: block;
position: relative;
z-index: 20;
}
#learning > p{
font-family: 'droid_serifitalic';
color: white;
font-size: 36px;
position: relative;
top:470px;
left:500px;
z-index: 21;
}