どの位置が、絶対配置された親に対して絶対配置された要素ですか？

どの位置が、絶対配置された親に対して絶対配置された要素ですか？親の国境またはコンテンツ？ 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

いくつかのビジュアルを使用して、どのように配置があなたのケースで機能するかを理解するのを手伝っていきます。

まず、両方の要素を絶対的に配置し、一方を他方に対して配置しないことに注意してください。

第1次確認：http://prntscr.com/e53phe 親の境界線を作成することによって、0pxの場合、子供の左上のピクセルが境界線とともに、親の左上のピクセルに配置されます。

第2回、境界線を親に追加すると、次のように変わります。http://prntscr.com/e53rcf 親の境界線として追加するピクセルは、親のコンテンツの「スペースを取っています」。これで、子供の左上の境界ピクセルが、親の境界線が「終わり」、つまり親の左上の内側の角から始まるところから開始されます。

希望に役立ちます。私はあなたがより良い理解を得るためにあなたのブラウザ上でボーダー+ポジショニングをすることをお勧めします。

PS：左：-20pxを削除しました。トップ：-20px;視覚化を助ける属性

出典

2017-02-06 09:35:26

結果として、結論は絶対位置を持つ親のコンテンツの左上に相対的な絶対位置の子を描いた – star

どの位置が、絶対配置された親に対して絶対配置された要素ですか？

答えて

関連する問題