CSS の位置付け: どこに行こうとしていますか?

✨
この記事は、私自身の Web サイトで公開されている大規模なシリーズの一部です。 CSS 101: シリーズの詳細については、ここをクリックしてください。完全に無料です!

CSS 配置の魔法の領域へようこそ。ここでは、Web 要素のアーキテクトやデザイナーを演じることができます。ボタンを希望の場所に正確に配置する方法や、ヘッダーが逸れないようにする方法を疑問に思ったことがあるなら、ここが正しい場所です。機知に富み、ちょっとした楽しみを交えながら、CSS の配置の基本を詳しく見ていきましょう。

1. 静的位置決め: デフォルト設定

静的位置設定は、テレビのデフォルト設定のようなものです。派手なものは何もなく、シンプルでシンプルです。デフォルトでは、すべての要素は静的に配置されます。つまり、ご想像のとおり、ドキュメント内で次々と流れていくことになります。

リーリー

position: static; を使用すると、本質的には、要素を通常の場所に自然に配置するようにブラウザーに指示することになります。それは、ポジショニングの「ここには何も見られない」ということです。

2. 相対的な位置付け: 少しずれた友人

相対的な位置関係は、いつも少し場違いではあるものの、魅力的な友達がいるようなものです。ページの残りの部分を邪魔することなく、要素を通常の位置に相対的に移動できます。

リーリー

ここで、.relative-box はoriginalの位置から下に 10 ピクセル、右に 20 ピクセルシフトされます。周囲の残りの要素は元の場所に残ります。

3. 絶対的な位置決め: 自由の探求者

絶対位置決めは、群衆に従わない冒険好きな友達のようなものです。これにより、最も近い「非静的」祖先 (つまり、相対、絶対、固定、またはスティッキーの位置を持つ祖先) を基準にして、要素を任意の場所に配置できます。

リーリー リーリー

この例では、.child は .parent の上から 30 ピクセル、右から 10 ピクセルの位置に配置されます。 .parent が存在しない場合は、最も近い位置にある祖先またはビューポートを基準にして配置されます。

プロのヒント?
要素が変換が適用された親内に絶対的に配置されている場合、要素は元のドキュメント フローではなく、変換された親を基準にして配置されます。予期しないレイアウトの変更や位置の問題を避けるために、この動作に注意してください。

4. 固定ポジショニング: 頑固な静的姿勢

固定位置は、決して動かさないお気に入りの椅子を持つようなものです。ビューポートを基準にして要素を配置できるため、どれだけスクロールしても要素は同じ場所に留まります。

リーリー

位置: 固定; の場合、.floating-action-button は、下にスクロールしても、ビューポートの下から 20 ピクセル、右から 20 ピクセルの位置に留まります。サイトのヘッダー、チャット ウィジェット、永続的な CTA ボタンなどの粘着性のある要素に最適です。

5. スティッキーポジショニング: 両方の長所を活かす

スティッキーなポジショニングは、常に部分的にスポットライトを浴びたり外されたりする友人を持つようなものです。相対位置と固定位置のハイブリッドと考えることができます。 Position: Sticky を持つ要素は、特定のポイントを超えてスクロールするとコンテナ内のその位置に固定されますが、それ以外の場合は相対的に配置された要素のように動作します。

リーリー

この例では、.sticky-box は、スクロールして通過するとコンテナーの上部に貼り付き、スクロールを続けるとそこに残りますが、これはコンテナーが表示されている間だけです。コンテナがスクロールして見えなくなると、スティッキー要素も一緒にスクロールします。ページの特定のセクション内に表示しておきたいヘッダー、ナビゲーション メニュー、またはサイドバーに最適です。

Z-Index: 達成者

ああ、Z インデックスです!ここで少し競争が激しくなります。要素が重なる場合、z-index によってどれが上に位置するかが決まります。高校生の人気コンテストのようなものですが、Web 要素が対象です。

リーリー

この場合、.box1 は .box2 よりも高い Z インデックスを持つため、上に表示されます。 z-index は、位置決めされた要素 (相対、絶対、固定、またはスティッキー) に対してのみ機能することに注意してください。

プロのヒント?
z-index には上記で説明した以外にも多くの機能があります。 「スタッキング コンテキスト」についてさらに深く掘り下げることに注目してください。これにより、複雑なレイアウトで Z-index がどのように機能するかをより深く理解できるようになります。

Zum Abschluss

CSS-Positionierung mag wie ein Rätsel erscheinen, aber sobald Sie den Dreh raus haben, werden Sie Elemente mit Präzision und Gespür platzieren. Jeder Positionstyp hat seine eigene besondere Rolle im Webdesign. Probieren Sie sie aus und sehen Sie, wie Sie Ihre Webseite genau richtig aussehen lassen können.

Viel Spaß beim Codieren!

✨
Psst! Wenn Ihnen das, was Sie gelesen haben, gefallen hat, sollten Sie hier klicken, um CSS 101: The Series auszuprobieren. Es ist völlig kostenlos!

以上がCSS の位置付け: どこに行こうとしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。