css - 设置\放置一个 DIV(CSS 层)以表格单元格作为引用

Question

您可以跳过以下 HTML 代码以继续实际问题

<!-- Some HTML Code-->
<table width="100%" height="100%" border="1">
<tr>
    <td rowspan="03" width="20%">&nbsp;</td>
    <td width="60%">&nbsp;</td>
    <td rowspan="03" width="20%">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>
</table>

上面代码的输出会有点像这样

现在我想要我的 CSS 层(DIV)设置，中心单元格(红色边框单元格)作为其REFERENCE如何做......

 #myLayer{
 position: ? ;
 left    : ? ;
 right   : ? ;
 top     : ? ;
 bottom  : ? ;
 padding : ? ;
 width   : * ;
 height  : * ;
 z-index : 2 ;
 }

以及在哪里放置 <div id="*"></div> 标签

Answer 1

不确定这是否是您要尝试执行的操作，但您可以为红色边框的 td 指定一个 id 并将 div 放入其中。然后使用以下 CSS:

#mainTD {
    position: relative;
}

#myLayer {
    position: absolute;
    top: 0;
    left: 0;
}

我从不使用表格进行布局，所以我不知道这是否会像我想的那样使用react，但这应该使#myLayer 的顶部、左侧、底部和右侧坐标相对于其父级 #mainTD 的坐标.所以在上面的例子中，top 和 left 设置为 0，#myLayer 的左上角应该在#mainTD 的左上角。