まず結論から言うと
絶対位置は、親のボックス サイズがボーダー ボックスであるかコンテンツ ボックスであるかに関係なく、配置された親の内側の境界線を基準とします。
2. 関連概念
コンセプト1、ポジション：絶対絶対位置決め
Position:absolute 絶対配置は、それ自体に最も近い位置にある親要素を基準にして配置されます。親要素が位置決めされていない場合は、おじいちゃんを見つけます。。。htmlまで。
コンセプト2、ボックスモデル
ボックス モデルでは、すべての HTML 要素は、コンテンツ、パディング、ボーダー、マージンで構成されるボックスとみなすことができます。このうち、IE ボックス モデル box-sizing: border-box; 標準ボックス モデル box-sizing: content-box;
概念3、ボックスのサイズ設定:ボーダーボックス | コンテンツボックス
box-sizing: content-box は、要素の実際の幅 = width + padding + border を意味します。
box-sizing: border-box は要素の実際の幅 = width = コンテンツの幅 + パディング + ボーダーを意味します
共感力が高い
3. コードの説明
親の設定位置: 相対; box-sizing: border-box; 子の設定位置: 絶対; 左: 100%; 上記のコードは、子ボックスを親ボックスの右側に配置します。
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
.parent{
width: 200px;
height: 300px;
display: block;
text-align: right;
background: #0056B1;
border: 20px solid #86C671;
box-sizing: border-box;
position: relative;
}
.child{
width: 100px;
height: 200px;
display: block;
text-align: right;
background: #CEF6FF;
border: 20px solid #F67539;
box-sizing: border-box;
position: absolute;
top: 0;
left: 100%;
}
</style>
</head>
<body>
<div class="parent">
父
<div class="child">子</div>
</div>
</body>
</html>4. 現象の説明
| 左:100% | 左:0 |
 |
 |
奇妙なのは、親のボックス サイズが border-box に設定されているため、子の左側が 100% に設定され、100% が親ボックスの実際の幅であると考えられ、自然に右側に配置されることになります。親ボックス。ただし、実際には、右側の境界線の内側にのみ配置されます。同様に、子の左が 0 に設定されている場合、子は親の左端ではなく、親の内枠の左端に配置されます。パディングをしても境界線の内側にあります。
もちろん、ご要望に応じるためにはさまざまな方法はありますが、それは想像どおりの結果ではありません。
5. 分析
ルーキー チュートリアルにはボックス モデルに関する格言があります。「ボックス モデルを使用すると、他の要素と周囲の要素の境界の間のスペースに要素を配置できます。」
個人的な理解では、子のposition:absoluteは通常のドキュメントフローから外れていますが、親はposition:relativeであるため、子と親の間の関係は依然として存在します。親ボックス モデルの特性により、子の配置は境界線に基づいて行われます。親がボーダーボックスであるかどうかに関しては、子の配置とは関係ありません。これは、ドキュメント全体をレイアウトするときの親の幅と高さの属性であるためです。
個人的な意見のみを表明します。議論を歓迎します~~~