Javascript 覆盖在另一个（动态定位）

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

HTML:

其次，左窗格的宽度将动态变化，因此我认为覆盖div的位置也需要动态调整。正如您在上面我的jsFiddle演示中所看到的，overlay div具有“绝对”定位和z索引值，这似乎是覆盖元素的最常用方法。这类方法可行，但顶部和左侧的值都可以/将发生变化

---

那么，应对这一挑战的最佳方式是什么？如果有必要的话，我可能只需要计算叠加div的左侧和顶部位置，但是有没有更优雅的方法来实现它呢？

这非常简单。您还需要使用position:relative。将它添加到右窗格中，然后使孤儿成为右窗格的子对象

绝对定位的工作原理是“顶部”和“左侧”属性与第一个非静态父对象的上角和左角相关。那个就是右窗格，因为我们给了它位置：相对。相对定位不会影响流或更改渲染位置，除非向其添加顶部、左侧等，因此不会影响父对象。我们必须将其更改为相对、绝对或固定，因为默认设置为位置：static。希望这一切都有意义

编辑：我还将孤立样式规则更改为使用基于百分比的宽度和高度。您可以这样做，因为相对父对象具有绝对定位。顶部、左侧、右侧和底部以及宽度和高度都相对于父对象

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

---

这真的很简单。您还需要使用position:relative。将它添加到右窗格中，然后使孤儿成为右窗格的子对象

绝对定位的工作原理是“顶部”和“左侧”属性与第一个非静态父对象的上角和左角相关。那个就是右窗格，因为我们给了它位置：相对。相对定位不会影响流或更改渲染位置，除非向其添加顶部、左侧等，因此不会影响父对象。我们必须将其更改为相对、绝对或固定，因为默认设置为位置：static。希望这一切都有意义

编辑：我还将孤立样式规则更改为使用基于百分比的宽度和高度。您可以这样做，因为相对父对象具有绝对定位。顶部、左侧、右侧和底部以及宽度和高度都相对于父对象

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

您可以使用偏移方法获取右窗格的顶部和左侧：

下面是一个

您可以使用偏移方法获取右窗格的顶部和左侧：

---

下面是一个更改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"));
    */
});

---

然后移动孤立div并在CSS中做一些微小的更改，

如下更改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"));
    */
});

然后移动孤立div并在CSS中进行一些微小的更改，

如果您使用：

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

您的div将像一个表一样工作，只使用css自动调整大小

如果您使用：

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

您的div将像一个表一样工作，只使用css自动调整大小

拨弄

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