Html位置決めabsolute,relative,fixedとleft,top,width%,height%の関係
3852 ワード
アブソリュート絶対位置決め
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もブラウザに対して相対的に