在表格单元格中使用 z-index 来覆盖图像

Question

我想在我放置在表格单元格中的图像上放置文本。

• 我尝试使用 z-index，但文本一直出现在图像下方。

• 我创建了一个名为 p1 的类，它将图像相对定位（不确定我应该如何在表格中处理它）和 z-index -1。

• 然后我在表格单元格标记中添加了类 ID。

到目前为止我所拥有的：

.font1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: small;
  text-align: left;
}
.hangingindent {
  padding-left: 100px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
.hangingindent2 {
  padding-left: 75px;
}
.p1 {
  position: relative;
  z-index: -1;
}
.backbox {
  z-index: -1;
  position: relative;
  left: 0;
  right: 0;
  botton: 0;
}
.text {
  z-index 100;
  color: #0000000;
  font-size: 14px;
  position: absolute;
  top: 100px;
  right: 200px;
  overflow: hidden;
}

<table width="1013" border="0" align="center" cellpadding="0">
  <tr>
    <td colspan="5">
      <img src="images/images2/header.gif" width="1013" height="642" />
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <img src="images/images2/menu-grid.gif" width="1013" height="232" />
    </td>
  </tr>
  <tr>
    <td width="55">&nbsp;</td>
    <td width="231">
      <img src="images/images2/solutions.jpg" width="204" height="46" />
    </td>
    <td width="233">
      <img src="images/images2/capabilities.jpg" width="204" height="46" />
    </td>
    <td width="232">
      <img src="images/images2/art services.jpg" width="204" height="46" />
    </td>
    <td width="254">
      <img src="images/images2/contact us.jpg" width="204" height="46" />
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" class="hangingindent2">
      <img src="images/images2/WELCOME.gif" width="500" height="100" />
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" class="hangingindent">
      <p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
        <br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
        <br />provide the highest quality products at the most competitive prices.</p>
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">
      <div class="backbox">
        <img src="images/images2/bottom2.gif" width="1013" height="810" />
        <div class="text">This is a test to see where the text will land</div>
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
</table>

Answer 1

正如我从您的问题中得到的那样，您想在图像上放置文字。所以要做到这一点，没有必要使用 z-index。您可以通过设置 p 标签的绝对位置并将 td 标签设置为相对位置来做到这一点。 它的演示是you can use the link

<table>
    <tr>
        <td>
            <p>Hello</p>
            <img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
        </td>
    </tr>
</table>

CSS：

img {
    width:200px;
}
td {
    border:2px solid red;
    position:relative;
}
p {
    position:absolute;
    color:yellow;
    font-size:30px;
    top:0px;
    left:70px;
}

Answer 2

您可以稍微更改标记。！

Z-index 将在位置设置为静态（默认）以外的位置工作。

1. 在这里，您可以删除<img> 标签并将图像显示为背景图像。
2. 其他解决方案将文本包装在 <p> 或 <div> 中并使其 position: absolute 和直接父级 <td> 为 position:relative（前面已经提到过）

小代码说明

exp1 -- 背景图片

td {
    background-image: url("");
    background-position: left top fixed;
}

exp1 - HTML 标记

<td>Data to be there on top of the image</td>

Please check this link! - JSFIDDLE