Question

我知道有很多问题可以提出类似于我在标题中所说的内容，但我的挑战有点独特，我将在下面解释。我有一组div块排列如下：

enter image description here

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块），以便标记为＆＃34;右上角＆＃的区域34; （浅蓝色）和＆＃34;右下角＆＃34; （绿色）完全覆盖。生成的布局如下所示：

enter image description here

看起来很简单，但有几点需要注意。首先，div中的#right-pane元素都应保留在原位（即，应仅保留在重叠的div下）;意思是以下方法对我没有任何好处：

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

其次，＆＃34;左窗格的宽度＆＃34;将动态改变，因此叠加div的定位也需要动态调整（我认为）。正如您在我的jsFiddle演示中看到的那样（见上文），叠加div具有绝对的＆＃39;与z-index值一起定位，这似乎是覆盖元素的最常用方法。这种作品，但＆＃34;顶部＆＃34;和＆＃34;左＆＃34;价值可以/将会改变。

那么，应对这一挑战的最佳方法是什么？我或许可以计算出＆＃34; left＆＃34; ＆＃34; top＆＃34;如果必须的话，叠加div的位置，但是有更优雅的方法来实现它吗？

Answer 1

这很简单。您还需要使用position: relative。将其添加到#right-pane，然后将#orphan作为#right-pane的孩子。

绝对定位的工作原理top和left属性与第一个非静态父级的左上角相关联。这将是#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和height都会相对于父级。

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

Answer 2

像这样更改你的jQuery：

$("#showlayer").click(function () {

    $("#orphan").css({
        'position': 'absolute',
            'display': 'block',
            'z-index': '10',
            'top': 0,
            'right': 0
    });

    /* This solution seems to work but not quite!
    $("#orphan").css({
        'float': 'left',
        'display': 'inline'
    });
    $("#right-pane")
        .empty()
        .append($("#orphan"));
    */
});

然后移动#orphan div并在CSS中进行一些微小的更改see fiddle

Answer 3

如果您使用：

display: table-cell; /*(IE8+) for the columns*/
display: table; /*for the wrapper*/

你的div会像TABLE一样只能用css自动调整大小。

小提琴http://jsfiddle.net/5u3deqka/5/

Answer 4

您可以使用offset方法获取top的{{1}}和left：

#right-pane

这是 fiddle

在另一个（动态定位的）<div> </div> </div>上覆盖<div>

4 个答案: