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

PHPz
リリース: 2024-08-17 06:03:05
オリジナル
826 人が閲覧しました


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

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

CSS Positioning: Where Exactly Do You Think You’re Going?

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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート