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

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

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

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

静的位置決めは、テレビのデフォルト設定に似ています。派手なものは何もなく、シンプルでシンプルです。デフォルトでは、すべての要素は静的に配置されます。つまり、期待どおり、文書内で次々とそれらが流れていくことになります。

div {
    position: static;
}

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

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

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

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

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

3. 絶対的な位置決め: 自由を求める者

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

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 30px;
    right: 10px;
}

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

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

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

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

.floating-action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

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

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

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

.sticky-box {
    position: sticky;
    top: 0;
}

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

Z-Index: 達成者

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

.box1 {
    position: absolute;
    z-index: 10;
}

.box2 {
    position: absolute;
    z-index: 5;
}

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

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

まとめ

CSS の配置はパズルのように思えるかもしれませんが、コツを掴めば、正確かつ巧みに要素を配置できるようになります。各ポジションタイプには、Web デザインにおける独自の特別な役割があります。これらを試してみて、Web ページを適切に見せる方法を確認してください。

コーディングを楽しんでください!

✨
くっそー！読んだ内容が気に入ったら、ここをクリックして CSS 101: The Series をチェックアウトしてください。完全に無料です!

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