CSS 位置属性

この記事では主にCSSのposition属性についての記事を紹介していますので、参考になると思います。編集者をフォローして見てみましょう。

(1)、static
は静的であると考えることができ、デフォルトの要素は静的に配置され、オブジェクトは通常のフローに従います。この時点では、4 つの位置決めオフセット属性は適用されません。つまり、left、right、bottom、top の使用は有効になりません。

(2)、相対
相対配置、オブジェクトは通常のフローに従い、その位置を基準にして上、右、下、左の 4 つの配置オフセット属性によってオフセットされても影響を受けません。通常のフロー内 通常のストリーム内の任意の要素。

(3)、absolute
a、絶対配置、オブジェクトは通常の流れから外れます。このとき、offset属性は、配置された祖先要素が存在しない場合、配置された祖先要素を参照します。 body 要素に戻ります。ボックスのオフセット位置は通常のフロー内のどの要素にも影響を与えず、そのマージンは他のマージンと一緒に折り畳まれません。

b. 要素の配置は、それ自体に最も近い祖先要素を参照します。1 つ目は、親要素または親要素の親要素です。そうでない場合は、ボディをコントロール オブジェクトとして選択します。 2 番目の条件は、祖先要素が位置決めされている必要があるということです。平たく言えば、position の属性値が非静的であるかどうかは問題ではありません。

(4)、固定
固定位置、絶対と一致しますが、オフセット位置はウィンドウに基づきます。スクロール バーが表示されると、オブジェクトはスクロールしません。

(5)、中心
は絶対と一致しますが、オフセットの位置決めは祖先要素の中心点を基準にします。ボックスは、そのコンテナ内で垂直方向と水平方向の中央に配置されます。 (CSS3)

(6)、ページ
は絶対と一致します。要素がページ分割されたメディア ブロックまたは領域ブロック内にある場合、要素の包含ブロックは常に最初の包含ブロックになります。それ以外の場合は、各絶対モードに依存します。 (CSS3)

(7)、sticky
オブジェクトは、通常の場合は通常のフローに従います。相対と固定を組み合わせたようなもので、画面上にある場合は通常の流れに従って入力され、画面外にスクロールされると固定のように動作します。この属性の性能は、実際に見られる吸着効果です。 (CSS3)

関連推奨事項:

CSS のposition 属性

css:position 属性

CSS の Position 属性の意味

以上がCSS 位置属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。