如果元素在容器外部，是否可以相对于容器以绝对定位来定位该元素

Is it possible to position an element with absolute positioning relative to a container if it is OUTSIDE the container?

本文关键字：定位 元素 相对于 是否 外部 如果      更新时间：2023-09-26

假设你有两个div：

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

div1有相对定位，div2有绝对定位。div2可以像使用CSS或纯Javascript一样定位div1内部吗？

使用 JavaScript。

您必须将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 小提琴

也许这符合你的问题？ 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;
}

是和不是，这取决于你如何构建它和周围的 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;
}
相关文章：