javascript - 将 <div> 叠加在另一个(动态定位的)<div> 上

Question

DEMO

我知道 SO 有几十个问题与我在标题中所说的类似，但我的挑战有些独特，我将在下面解释。我有一组 div block 排列如下:

HTML:

<div id='container'>
    <div id='left-pane'>Left pane</div>
    <div id='right-pane'>
        <div id='right-top-content'>Right top</div>
        <div id='right-bottom-content'>Right bottom</div>
    </div>
</div>
<button id='showlayer'>Add layer</button>
<div id='orphan'>Boo...I'm a blue layer!</div>

我在这里要做的是在 div#right-pane 的顶部叠加一个层(另一个 div block )，以便标记的区域因为“右上”(浅蓝色)和“右下”(绿色)被完全覆盖。生成的布局如下所示:

看起来很简单，但有几点需要注意。首先，#right-pane 中的两个 div 元素都应该保留在原位(即，应该只隐藏在覆盖的 div 下)；这意味着以下方法对我没有任何好处:

$("#right-pane").empty().append($("#orphan"));

其次，“Left pane”的宽度会动态变化，所以overlay div的位置也需要动态调整(我认为)。正如您在我的 jsFiddle 演示(见上文)中所见，覆盖 div 具有“绝对”定位以及 z-index 值，这似乎是覆盖元素的最常见方法。这种方法有效，但“top”和“left”值都可以/将会改变。

那么，应对这一挑战的最佳方法是什么？如果必须的话，我也许可以只计算覆盖 div 的“左”和“顶”位置，但是有没有更优雅的方法来完成它？

Answer 1

其实很简单。您还需要使用 position: relative。将它添加到 #right-pane，然后让 #orphan 成为 #right-pane 的 child 。

绝对定位的工作原理是 top 和 left 属性与第一个非静态父级的上 Angular 和左 Angular 相关联。那将是 #right-pane 因为我们给了它 position:relative。除非您向其添加 top、left 等，否则相对定位不会影响流或更改呈现位置，因此我们的父级不会受到影响。我们必须将其更改为 relative(或 absolute 或 fixed)，因为默认值为 position:static。希望这一切都有意义。

Demo

#right-pane {
    width:300px;
    float:left;

    position: relative;
}

编辑:我还更改了 #orphan 样式规则以使用基于百分比的宽度和高度。您可以这样做是因为相对父级的绝对定位。 top、left、right 和 bottom 以及 width 和 高度 相对于父级。

#orphan {
    width:100%;
    height:100%; /* changed width and height to be dynamic */
    display:none;
    background:blue;
    color:white;
}