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将使用位置设置为静态以外的值（默认值）。

在此处，您可以移除<img>代码＆amp;将图像显示为背景图像。
其他解决方案将文字换成<p>或<div>＆amp;让它成为position: absolute＆amp;直接父<td>为position:relative（前面已经提到过）

小代码解释

exp1 - background-image

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

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

2 个答案: