CSSの位置づけを理解する-htmlチュートリアル-php.cn

CSSの位置づけを理解する

WBOY

リリース： 2016-09-20 03:29:58

オリジナル

969 人が閲覧しました

positionの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 属性が設定されていない場合は、通常のドキュメントフローに従って配置されます。