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

Question

假设您有两个 div:

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

div1 是相对定位，div2 是绝对定位。能否使用 CSS 或纯 Javascript 将 div2 定位为就好像它在 div1 中一样？

Answer 1

使用 JavaScript。

您必须使用 position: absolute 将 div 包装在父容器中，并将 div2 position 也设置为 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 fiddle