html - 使用 knockout 在变量表上进行 div 定位和缩放

Question

我想为一个行数可变的表制作一个叠加层(div)。必须覆盖整个表格，所以我想要:

• 位置相同。
• 高度相同。
• 宽度相同。

我的代码看起来与此类似，我删除了此示例的部分代码。

// the overlay
<div data-bind="style: {position: 'absolute', zIndex: '999999'}"></div>

// the table
<table data-bind="foreach: fields">
   <tbody class="formGroup">
      <tr>
        <th>
            <label data-bind="text: name"></label>
        </th>
        <td>
            // the field comes here
            <!-- ko template:--><!-- /ko -->
        </td>
     </tr>
   </tbody>
</table>

所以我想知道让 div 直接放在 table 上方的最佳方法是什么？

Answer 1

实现此目的的一种方法是添加一个带有 position: relative 的包装器。这样，叠加层将相对于此包装器定位。

<div class="overlay-wrapper">
    <div class="overlay"></div>

    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
    <p>Some dynamic height</p>
</div>

使用以下 CSS:

.overlay-wrapper {
    position: relative;
}
.overlay-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 2;
}

http://jsfiddle.net/o13qaqc1/