Question

我需要将一个DIV放在TD内的IMG上，只是为了显示一些内容，但是当我这样做时，DIV是在IMG下创建的（不是覆盖，只是在下面，像浮动左边，向右清除......）

HTML：

<table id="table" cellspacing="0">
    <tr>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
    </tr>
</table

Answer 1

这会让你感到厌烦：

#table td { position:relative; }
#table div {
    left:0;
    position:absolute;
    top:0;
}

只需将其添加到表格的css中

即可

Answer 2

你可以使用这样的css：

#table td, #table td img {
  position:relative
}
#table td img {
  z-index:-1
    max-width:100%;
}
#table td div {
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,0.5);
  color:#fff;
  width:100%;
}

示例：http://jsbin.com/iyESasiv/1/edit。您可以从css中删除背景颜色等。

Answer 3

您只需设置正确的索引即可。

    <table id="table" cellspacing="0">
    <tr>
        <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td>
        <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td>
        <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td>
    </tr>
</table>

更简单：

<table id="table" cellspacing="0">
    <tr>
        <td><img class="imgClass" src="something-here.jpg" alt="asd"/>
               <div class="divClass">Text over the image</div></td>
        <td><img class="imgClass" src="something-here.jpg" alt="asd"/><div class="divClass">Text over the image</div></td>
        <td><img class="imgClass" src="something-here.jpg" alt="asd"/><div class="divClass">Text over the image</div></td>
    </tr>
</table>

并在你的css文件中添加：

.imgClass{
   z-index:0;
}
.divClass{
   z-index:1;
}

在TD内部对IMG进行DIV

3 个答案: