Question

相对于其绝对定位的父级，哪个位置是绝对定位的元素？父母的边界或内容？ Css代码：

* {
    margin:  0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
    position: absolute;
    margin:auto;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    width: 400px;
    height: 200px;
    border: 10px solid darkgray;
}

.child {
    position: absolute;
    left: -20px;
    top:-20px;
    width: 440px;
    height: 240px;
    background: ;
    border: 5px solid darkgray;
}

Html代码：

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

似乎相对于其父级内容定位的div with class = "child"，而不是边框，任何人都知道它的确切位置规则？

Answer 1

我将尝试使用一些视觉效果来帮助您了解定位如何适用于您的案例。

首先，请记住，您已经绝对定位了两个元素而不是相对于另一个元素。

第一次检查：http://prntscr.com/e53phe 通过使父边框：0px，您可以看到您孩子的左上角像素及其边框位于您父母的左上角像素中。

第二，看看我们向父母添加边框时它的变化：http://prntscr.com/e53rcf 您添加为父级边框的像素是“占用父级内容的空间”。所以，现在孩子的左上边框像素从父母的边框“结束”开始，这意味着在父母左上方的内角。

希望有所帮助。我建议你在浏览器上使用边框+定位来更好地理解。

PS：我删除了左边：-20px;和顶部：-20px;帮助可视化的属性

相对于绝对定位的父母，哪个位置是一个绝对定位的元素？

1 个答案: