Question

鉴于以下html代码，如何使z-index red div与所有单元格重叠。问题是红色div必须绝对定位，以免影响细胞内容。

＆＃13;

<html>
	<table style="position:relative;z-index:0;">
		<tr style="height:100px;position:relative;z-index:0;">
			<td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0;overflow:visible;">
			    <div style="position:absolute;background-color:red;height:inherit;width:100%;top:10px;left:10px;z-index:500;"></div>
			    xyz
			</td>
			<td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td>
		</tr>
			<tr style="height:100px;position:relative;z-index:0">
			<td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td>
			<td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:0"></td>
		</tr>
	</table>
</html>

＆＃13;

Answer 1

从所有元素中移除z-index，并将z-index: 1提供给红色div的父元素（td）。

＆＃13;

<html>
<table style="position:relative;">
  <tr style="height:100px;position:relative;">
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;z-index:1;overflow:visible; ">
      <div style="position:absolute;background-color:red;height:inherit;width:100%;top:10px;left:10px;"></div>
      xyz
    </td>
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td>
  </tr>
  <tr style="height:100px;position:relative;">
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td>
    <td style="position:relative;width:200px;height:inherit;background-color:green;border:solid 2px green;"></td>
  </tr>
</table>

</html>

＆＃13;

在表格单元格顶部分层绝对定位div

1 个答案: