gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:26:19 27 4
gpt4 key购买 nike

给定以下 html 代码,如何使 z-index 红色 div 覆盖所有单元格。问题是红色 div 必须绝对定位,这样它才不会影响单元格内​​容。

<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>

最佳答案

从所有元素中移除z-index,并将z-index: 1赋给红色div的父元素(td).

<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>

关于html - 在表格单元格顶部分层绝对定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27999512/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com