Html位置決めabsolute,relative,fixedとleft,top,width%,height%の関係

アブソリュート絶対位置決め

absoluteは、エレメントをドキュメントストリームから離れ、ドキュメント空間を占有しない(すなわち、他のエレメントの上を押さえることができる)、absoluteの位置は、最も近い位置にある親エレメント(すなわち、使用するleft、topなどは、最も近い位置にある親エレメントに対して)に対して、bodyに対してwidthおよびheightも比較的最近の位置にある親エレメントであり、以下の例では、

<div style="width: 480px; height: 300px; position: fixed;">
    
    <a class="w-100 h-100" style="position: absolute;">
        <div>
            <div style="width: 100%; height: 100%; position: absolute;">
                  div
            div>
        div>
    a>
div>

テストdivの幅は480300です

relative相対位置

relativeはドキュメント空間を占有し、relativeの位置は元の位置(すなわち使用するleft、topなどは元の位置)に対して、widthとheightは親要素に対して

fixed固定位置決め

fixedは要素をドキュメントストリームから離れ、ドキュメント空間を占有しない.fixedの位置はブラウザに対して(これはfixedとabsoluteの違いであり、最近の位置に対してではない)(すなわち、使用するleft、topなどはブラウザに対して、top:500 pxのように、ブラウザー上の境界は500 pxである)、widthとheightもブラウザに対して相対的に