CSSのposition属性について

position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。今回はCSSのposition属性についてお話します。

Standard

MDN ドキュメントによると、CSS プロパティの位置は、ドキュメント内での要素の配置方法を指定するために使用されます。さらに、要素の最終的な位置を決定するには、オフセット属性 top、right、bottom、left が必要です。すべての要素に適用され、継承はなく、カスケード コンテキストを作成します。位置決めの値は5種類(?):

1. position: static デフォルト値

2. position: 相対相対位置

3. position: 絶対絶対位置

4. position: 固定固定位置

5. position: Sticky Sticky Positioning

position 属性は非常に基本的な知識であるため、次のページでは効果を示すために多くの画像やデモを使用しません。結局のところ、これらの内容はドキュメントやチュートリアルを参照して知る必要があります。

デフォルト値 static

要素のposition属性が設定されていない場合、または値がstaticの場合、要素はドキュメントフロー内にあり、leftなどのオフセット属性は効果がありません。ドキュメントには、z-index 値が無効であるとも記載されています。考えてみたのですが、通常のドキュメントフロー内にある要素であれば、上位層や下位層に他の要素と競合する要素は存在しないので、基本的にz-indexの適用シナリオは存在しません。もしかしたら何か見逃していることがあるでしょうか？これらを除けば、静的に関して特別なことは何もありません。

相対配置相対

相対配置に設定されている要素は依然としてドキュメントフロー内にあり、それが占有するスペースは引き続き保持されます。ただし、上下左右のオフセットプロパティが設定されている場合は、元の位置に対して対応する方向に移動します。このとき、要素空間はまだ存在しており、周囲の要素は再配置されません。言い換えれば、透明なレンガが要素の元の位置に配置され、目に見えませんが、触ることはできます。さらに、相対的に配置された要素は、内部の子要素の配置の基点として機能する包含ブロックを作成します。

包含ブロックの定義: 最も近いブロック レベルの祖先ボックス、テーブル セル、またはインライン ブロックのインライン ブロック祖先ボックスのコンテンツ エッジで構成されます。

結論ブロックの決定:

絶対配置絶対

このとき、絶対配置要素は文書の流れ(通常の流れ)から外れます。 、透明なレンガ ブロック プレースホルダーはありません。近くの要素も再配置されます。同時に、要素は書式設定コンテキスト (BFC) を生成し、上下のマージンは結合されず、内部のフローティング要素によって高さが崩れることはありません。

なぜ包含ブロックの定義と判定を説明する必要があるかというと、絶対配置要素の配置点は最も近い包含ブロックであり、設定される上下左右のオフセット属性は、含まれているブロックの左上隅を原点とします (これはテキストの方向と同じです)。上の図からわかるように、絶対配置された祖先要素の位置属性が静的である場合、最初の包含ブロック本体を基準にして配置されます。別の値の位置属性を持つ祖先要素が存在する場合、その要素は、その要素が作成された包含ブロックを基準にして配置されます。

ここで実際に浮動要素と比較したいのですが、Zhang Xinxu 氏のブログで、浮動要素は幅と高さのないインライン ブロック要素と見なすことができるのに対し、絶対的な配置は高さのないインライン ブロックであると述べているのを目にしました。幅と高さの要素はありません。なぜインラインブロック要素とみなされるのかはよく覚えていないんです〜

固定位置固定

固定位置要素は、画面ビューポートを基準にして配置されます。この場合、スクロールによって位置は変わりません。 Web ページを印刷する場合、この要素は各ページの固定位置に表示されます。さらに、固定位置の要素も書式設定コンテキストを作成します。
この文書には、固定位置に影響を与える特別な状況があることについても言及されています。つまり、親要素のtransform属性がnoneでない場合、固定配置コンテナはビューポートではなく親要素に変更されます。このような予期せぬ状況には注意し、回避する必要があります。
最後に、あなたがモバイル Web 開発者である場合、iOS システム Web ビューの固定レイアウトでいくつかのバグに遭遇することもあります。これらのバグに対する完璧な解決策を見つけるのは不可能な場合があるため、バグに遭遇した場合は、js を使用してスタイルを動的に決定および変更するか、単純にレイアウトを再設定することを検討してください。

sticky Positioning Sticky

この配置方法は実験的な属性であり、ドキュメントでは運用環境では使用しないことを推奨しているため、多くの人は見たことがないと思います。ただし、その機能は依然として非常に便利なので、それについて学ぶことができます。

粘性位置決めは、相対位置決めと固定位置決めの組み合わせです。上下左右のオフセットプロパティに基づいてしきい値を設定します。相対測位がしきい値を超える場合、固定測位に変換されます。

新しい属性なので、このデモにアクセスして見てください。

デモでは主に

<span style="font-size: 16px;">dt{<br>    position: -webkit-sticky;<br>    position: sticky;<br>    top: -1px;<br>}<br></span>

のコードになっています まずブラウザでのスティッキーポジショニングのサポートから、IEを除いて基本的にサポートされていることが分かります。ただし、テーブル関連の要素は Firefox ではサポートされておらず、thead や tr などの要素は Chrome ではサポートされていません。そのため、通常に使用したい場合は、-webkit などの接頭辞を追加する必要がある場合があります。
次に、しきい値として「top:-1px」を設定します。要素が相対配置要素の場合、その上部とそれを含むブロックの間の距離が -1px 以上の場合、固定配置に変換されます。したがって、スティッキー ポジショニングを使用するには、しきい値の設定が重要です。

デモで示されている機能に加えて、スティッキー配置アプリケーション シナリオは、いわゆるスティッキー フッターでも使用できます。製品でこのようなレイアウトが必要な場合はよくあると思います~

幅が限られた要素を配置する

多くの場合、

<span style="font-size: 16px;">position:absolute;<br>top:0;<br>bottom:0;<br>right:0;<br>left:0;<br>width:50%;<br>height:50%;<br>margin:auto;<br></span>

を使用して、絶対的に配置された要素を垂直方向と水平方向に中央揃えにします

。マージンは auto 値に設定され、方程式:

margin+border+padding+width=element width/height に従って、マージンはセンタリングを実現するために対応する方向の空き部分の半分に設定されます。

しかし、絶対に配置された要素はドキュメント フローの外にあるのではないでしょうか?なぜマージンがまだ機能するのでしょうか?これは、上下左右のオフセット プロパティも設定しているためであることがわかりました。一般に、上、下、または左と右が同時に設定されている場合、つまり反対の位置決め方向属性が同時に特定の位置決め値を持っている場合にのみ、上または下、左または右を設定する必要があります。時間の経過とともに流体特性が発生します。この時点で、絶対的に配置された要素の幅は、それを含むブロックの幅に適応します。この場合、絶対的に配置される要素は通常のドキュメント フローの要素と同じであり、margin:auto を使用して中央に配置できます。

1. display/float/positionの三角関係

2. 要素が絶対配置や固定配置に設定されている場合、Float属性は無効となり、表示もブロック値に変更されます。つまり、この時点の要素はすべてブロックレベルの要素です。

   displayをnoneに設定すると要素は消え、設定されたposition属性やfloat属性も当然無意味になります。

上記の内容はCSSのposition属性に関するもので、皆様のお役に立てれば幸いです。

関連する推奨事項:

CSS の Position 属性

CSS Position 属性の例の詳細な説明

🎜🎜 CSS Position 属性の使用方法🎜🎜

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