在另一个(动态定位的)<div>上覆盖<div>

Question

DEMO

我知道有几十个问题可以提出类似于我在标题中所说的内容,但我的挑战有点独特,我将在下面解释.我有一组div块安排如下:

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在顶部叠加一层(另一个块),div#right-pane使标记为"右上"(浅蓝色)和"右下角"(绿色)的区域完全覆盖.生成的布局如下所示:

看起来非常简单,但有几点需要注意.首先,应该保留两个div元素#right-pane(即,应该只保留在重叠的div下); 意思是以下方法对我没有任何好处:

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

其次,"左窗格"的宽度将动态变化,因此叠加div的定位也需要动态调整(我认为).正如您在我的jsFiddle演示中看到的那样(参见上文),overlay div具有'绝对'定位以及z-index值,这似乎是覆盖元素的最常用方法.这种工作,但"顶部"和"左"值都可以/将改变.

那么,应对这一挑战的最佳方法是什么？如果必须的话,我或许可以计算叠加div的"左"和"上"位置,但有更优雅的方法来实现它吗？

Answer 1

这很简单.你还需要使用position: relative.添加它#right-pane,然后生#orphan一个孩子#right-pane.

绝对定位的工作原理是top和left属性与第一个非静态父级的左上角相关.那是#right-pane因为我们给了它position:relative.相对定位不影响流动或改变所呈现的位置,除非你加top,left等它,所以我们的家长不受影响.我们必须将其更改为relative(absolute或者fixed),因为默认值为position:static.希望一切都有意义.

演示

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

    position: relative;
}

编辑:我还更改了#orphan样式规则以使用基于百分比的宽度和高度.你可以这样做,因为与亲戚的绝对定位.两者top,left和right,和bottom,width并且height变得相对于父母.

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