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

哪个位置是绝对定位的元素相对于其绝对定位的父元素？父母的边界还是内容？的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"定位相对于其父的内容，而不是边界，任何人都知道它的确切位置的规则？

来源

2017-02-06 star

我会尽量帮助您理解定位如何适用于您的案例，使用一些视觉效果。首先，请记住，你已经完全定位了两个元素，而不是一个相对于另一个。

第一次检查在这里：http://prntscr.com/e53phe 通过使父边框：0px你看到你的孩子左上角的像素连同它的边框位于你父母的左上角像素。

2，当我们向父代添加边框时，请看它如何变化：http://prntscr.com/e53rcf 您添加为父代边框的像素是'取得父代内容的空间'。所以，现在孩子的左上角边界像素开始于父母边界“结束”的位置，即父母左上角的内角。

希望有所帮助。我建议你玩边框+在浏览器上定位以获得更好的理解。

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

来源

2017-02-06 09:35:26

作为一个结果，我可以说，结论绘制绝对定位的孩子相对于其父母的内容的左上角绝对位置 – star

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

回答

相关问题