新人チュートリアルのCSSチュートリアルにこんな文章があります
絶対配置された要素の位置は、最も近くに配置された親要素を基準にしています。要素に配置された親要素がない場合、その位置は<html>を基準にしています。
私は常にこの文を絶対配置の基準として使用してきました。今日まで、祖先要素が絶対配置要素として配置されていないことが偶然発見されました。配置か、幅と高さが相対的かどうかに関係なく、ブラウザウィンドウはビューポートです。
デモ：
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<style>
html {
min-width: 1200px;
}
.box {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
幅を設定すると、ボックスの幅と位置は常に、HTMLではなくブラウザウィンドウのサイズに相対的になります。
その後、MDNドキュメントを確認したところ、新人チュートリアルの定義が正しくないことがわかりました。MDN で記述されているのは次のようなものです。
絶対配置された要素は、最も近い非静的祖先要素を基準にして配置されます。そのような祖先要素が存在しない場合、それはICB（初期コンテナーブロック、初期包含ブロック）に関連しています。
最初の包含ブロック：
- ルート要素の包含ブロックは、初期包含ブロックと呼ばれる長方形です。
- [Continuous Media]の場合、最初の包含ブロックのサイズはビューポートのサイズに等しく、開始点はキャンバスの原点です。
- 初期化を含むブロックの方向は、ルート要素の方向と同じです。
- 最初の包含ブロックはビューポートではなく、同じサイズです。
概要：絶対配置要素に静的に配置されていない祖先要素がない場合、要素は初期包含ブロックに対して相対的に配置されず、初期包含ブロックのサイズと方向はビューポートと同じです。