哪個位置是絕對定位的元素，相對於其絕對定位的父元素？

哪個位置是絕對定位的元素相對於其絕對定位的父元素？父母的邊界還是內容？的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

哪個位置是絕對定位的元素，相對於其絕對定位的父元素？

回答

相關問題