如何在表格布局中将div放在另一个div的顶部？

Question

我的布局看起来像这样:

这是一张桌子,顶部有一个单元,下面有三个单元.三个单元格为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;

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

Answer 1

您需要将容器div放在可模糊单元格内,围绕单元格的内容.

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

这样你就可以保证相对于这个容器div的绝对定位,而不是树上相对的任何元素(很可能是<body>or <html>).