如何在表格布局中将 div 放在另一个 div 之上？答案

【问题标题】：How to place a div on top of another div in a table layout?如何在表格布局中将 div 放在另一个 div 之上？
【发布时间】：2018-05-16 21:37:46
【问题描述】：

我的布局如下所示：

这是一张表格，上面有一个单元格，下面有三个单元格。三个单元格分别为 150px、auto、200px。

在中间单元格内，我有一个包含日历的 div。我希望能够在此之上放置另一个不透明的 div，以便在处理 Ajax 请求时“模糊”它并使其无法使用。

我尝试过使用 opacity-div 设置样式

position: absolute;
margin-left:150px;
margin-right:200px;
width:100%

但事实证明width 100% 是整个屏幕的 100%，而不仅仅是那个单元格。

我尝试将 div 放在代码中的日历 div 下方，并使用以下样式对其进行样式设置：

position: relative;
top: -100%;
height: auto;

但这似乎根本不起作用，因为我无法知道日历的高度，所以我无法确定高度以及我应该将它向上移动多少。

【问题讨论】：

标签： html css

【解决方案1】：

您需要在可模糊单元格内放置一个容器 div，围绕单元格的内容。

<tr>
  <td>...</td>
  <td>
    <div style="position: relative">
        <div id="calendar">...</div>
        <div id="blur"></div>
    </div></td>
etc...

这样可以保证绝对定位是相对于这个容器 div 进行的，而不是树上的任何元素都是相对的（很可能是 <body> 或 <html>）。

【讨论】：