如果元素在容器之外，是否可以相对于容器进行绝对定位？

Question

假设您有两个div：

<div class="div1"></div>
<div class="div2"></div>

div1具有相对定位，而div2具有绝对定位。 可以使用CSS或纯Javascript将div2定位为好像位于div1内吗？

Answer 1

使用JavaScript。

您必须将divs包装在具有位置：absolute的父容器中，并将div2位置也设置为absolute。

<div class="wrap">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

然后使用javascript：

var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");

div2.style.left = div1.offsetLeft + 'px';
div2.style.top = div1.offsetTop + 'px';

参见JS小提琴

Answer 2

也许这符合您的问题？ http://jsfiddle.net/bghxmm3o/

绝对div2（蓝色）位于相对div1（红色）中。

这只是CSS：

#d1 {
    position:relative;
    top:10px;
    left:10px;
    width:200px;
    height:200px;
    background:red;
}
#d2 {
    position:absolute;
    top:100px;
    left:50px;
    width:20px;
    height:20px;
    background:blue;
}

Answer 3

是和否，这取决于您如何构建它以及周围的HTML。 如果将这段代码直接放在主体内，则可以，因为主体将成为.div1和.div2的父元素。 而且，如果您不知道它已经定位了绝对位置，则将该元素定位在“相对”相对定位的父元素的左上角。 （很难用文字解释）

但是，如果要在这两个div元素之外添加其他HTML，则需要一个具有相对位置的父元素。

因此，例如：

HTML

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

CSS

.parent {
    float:left;
    position:relative;
}

.box1 {
    width:100px;
    height:100px;
    float:left;
    position:relative;
}

.box2 {
    width:100px;
    height:100px;
    position:absolute;
}