Question

假设你有两个div：

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

div1具有相对定位，div2具有绝对定位。可以使用CSS或纯Javascript将div2放置在div1内吗？

Answer 1

使用JavaScript。

您必须使用 position：absolute 将div放在父容器中，并将div2位置设置为绝对值。

<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 fiddle

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;
}

如果元素位于容器外面，是否可以相对于容器定位具有绝对定位的元素？

3 个答案: