CSSの位置付け：絶対的には固定で相対的な互換性がありますか？

Question

absoluteに関しては、fixedはrelativeのように動作するようです。

.fixed, .relative { 
 
    border: 1px solid; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 

 
.fixed { 
 
    border-color: red; 
 
    position: fixed; 
 
} 
 

 
.relative { 
 
    border-color: blue; 
 
    margin-left: 200px; 
 
    position: relative; 
 
} 
 

 
.absolute { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    position: absolute; 
 
} 
 

 
.a { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.b { 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="fixed"> 
 
    <span class="absolute a">Left Top</span> 
 
    <span class="absolute b">Right Bottom</span> 
 
</div> 
 

 
<div class="relative"> 
 
    <span class="absolute a">Left Top</span> 
 
    <span class="absolute b">Right Bottom</span> 
 
</div>

残念ながら、私はなぜ理解していません。私はこれがどこかで定義されることを期待していますが、absoluteとrelativeについては、absoluteとfixedではなく、議論するリソースしか見つかりませんでした。

これが問題につながる：それは、absolute位置に関しては、私は親にオフセット量を制御するためにtop/left/right/bottomを使用することができるという、fixedとrelative要素と同じに扱うことができる、ということであっても本当です？

Answer 1

position:static以外のものは、配置された子の新しい親コンテキストを設定します。

これは絶対位置決め要素は、その最も近い位置する祖先（静的ではない、すなわち、最も近い祖先）に対して位置決めされ

絶対位置決めのためのMDNドキュメントで確認することができます。

したがって、position:fixedを設定すると、絶対的な子要素は新しいコンテキストに従います。

これは、fiddle hereであることがわかります。 div .rel divのpositionを変更すると、赤いdivのセットが移動しますが、絶対的に配置された青いdivも一緒に移動します。それは絶対位置に来るとき

もう一つの良いソースは、

を言うw3.org不可欠な概念である含むブロックである：ブロックボックス絶対配置ボックスの位置及び寸法はに関連していること。静的ボックスと相対的に配置されたボックスの場合、包含ブロックは最も近いブロックレベルの祖先であり、他の言葉では親要素です。しかし、絶対配置された要素の場合は、もう少し複雑です。この場合、包含ブロックは、最も近い位置にある祖先である。 「位置付け」とは、positionプロパティがrelative、absoluteまたはfixedに設定されている要素、つまり通常の静的要素以外の要素を意味します。

出典： MDN Positon、w3org absolute position