CSSの位置づけを理解する

positionの4つの属性値:

1. 親戚
2. 絶対
3. 修正されました
4. 静的

<
1.relative

relative属性は、それ自体の位置を基準にしてオフセットされます。たとえば、demo1 の相対属性を設定する場合は、次の CSS コードを設定します:

#demo1
{

位置:相対;

パディング:5px;
上:5px;
左:5px;
}


私の理解では、相対属性が設定されていない場合、demo1 の位置は通常のドキュメント フローに従って特定の位置にあるはずです。ただし、demo1 の位置が相対に設定されている場合、上、右、下、左の値に応じて想定される位置に応じてオフセットされます。相対の「相対」の意味もこれに反映されます。 。

相対が設定されていない場合は、demo1 がどこにあるべきかを覚えておいて、設定したら、想定される位置に従ってオフセットします。

ただし、sub2の位置は元の位置であり、demo1がposition属性を追加しているため、その位置は変わりません。

このとき、demo2 の位置も相対に設定されている場合、sub1 と同じになり、元の位置に従ってオフセットされます。

相対のオフセットは、オブジェクトのマージンの左上側 (左上の頂点) に基づいていることに注意してください。


2. 絶対この属性は誤解を招きます。位置属性が絶対に設定されている場合、常にブラウザウィンドウに従って配置されると言われていますが、これは実際には間違っています。実はこれが固定属性の特徴です。

demo1の位置を絶対位置に設定する場合:

(1)demo1の親オブジェクト(親オブジェクトであれば曽祖父)もposition属性を設定し、positionの属性値を設定する場合絶対的または相対的です。つまり、デフォルト値でない場合、sub1 はこの親要素に従って配置されます。

親がマージン、ボーダー、パディングなどの属性を設定している場合、この位置決めポイントはパディングを無視し、

パディング
の開始位置から配置されます(つまり、パディングの左上隅からのみ開始します)。
は、マージンの左上端から配置が開始されると考えるのが自然ですが、考え方は異なります。
次の質問は、sub2 の場所はどこですか?位置が絶対に設定されている場合、sub1 は親に属していないかのように通常のドキュメント フローからオーバーフローしてしまうため、DreamWeaver では「レイヤー」と呼ばれますが、実際には同じ意味です。 。この時点で、sub2 は sub1 の位置を取得し、そのドキュメント フローは sub1 に基づくのではなく、親から直接開始されます。 (2)demo1にposition属性を持つ親オブジェクトがない場合は、bodyを位置決めオブジェクトとして使用し、ブラウザウィンドウに合わせて配置することになります。

3. fixed

fixed は常にボディを位置決めオブジェクトとして使用し、ブラウザー ウィンドウに従って配置されます。

4. static

position のデフォルト値。通常、position 属性が設定されていない場合は、通常のドキュメント フローに従って配置されます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。