ブロックを基準とした CSS の位​​置。 CSS - ブロック要素の配置。 ブラウザの左上隅を基準とした位置

最終更新日: 2016 年 4 月 28 日

CSS は要素の配置機能を提供します。つまり、ページ上の特定の場所に要素を配置できます。

CSS での位置を制御する主なプロパティは、position プロパティです。 このプロパティは、次のいずれかの値を取ることができます。

static : 標準要素の配置、デフォルト値

絶対 : 要素の位置プロパティが静的でない場合、要素はコンテナ要素の境界を基準にして配置されます。

relative : 要素は、デフォルトの位置を基準にして配置されます。 通常、相対配​​置の主な目的は要素を移動することではなく、ネストされた要素の絶対配置のための新しいアンカー ポイントを確立することです。

fix : 要素はブラウザ ウィンドウを基準にして配置されます。これにより、スクロールしても位置が変わらない固定要素を作成できます。

float プロパティと static 以外の位置決めタイプ (つまり、デフォルトのタイプ) を要素に同時に適用しないでください。

絶対位置決め

ブラウザの表示領域には、上下左右の端があります。 これら 4 つのエッジのそれぞれには、対応する CSS プロパティ (左、右、上、下) があります。 これらのプロパティの値は、ピクセル、ems、またはパーセンテージで指定します。 4 辺すべてに値を設定する必要はありません。 原則として、上端からのインデントと左端からのインデントの 2 つの値のみが設定されます。

こんにちは世界

ここで、絶対位置の div は、ビューポートの境界線の左に 100 ピクセル、下から 50 ピクセルの位置になります。

この div 要素の後に他の要素があることはそれほど重要ではありません。 この div ブロックは、いずれの場合も、ブラウザーのビューポートの境界を基準にして配置されます。

絶対配置の要素が別のコンテナ内にあり、そのコンテナの位置プロパティ値が static と等しくない場合、要素はコンテナの境界を基準にして配置されます。

相対位置決め

相対位置指定も相対値で指定します。 要素を移動する特定の位置を指定するには、同じ top、left、right、bottom プロパティが使用されます。

z-index プロパティ

デフォルトでは、2 つの要素に同じ境界線がある場合、HTML マークアップで最後に定義された要素がもう一方の要素の上に表示されます。 ただし、z-index プロパティを使用すると、要素がオーバーレイされるときに要素の順序を変更できます。 プロパティは値として数値を受け取ります。 より大きな z-index 値を持つ要素は、より小さな z-index 値を持つ要素の上に表示されます。

例えば：

次に、redBlock ブロック スタイルに新しいルールを追加しましょう。

RedBlock( z インデックス: 100; 位置: 絶対; 上: 20 ピクセル; 左: 50 ピクセル; 幅: 80 ピクセル; 高さ: 80 ピクセル; 背景色: 赤; )

ここでは、z-index は 100 です。ただし、数値 100 である必要はありません。2 番目のブロックには未定義の z-index があり、実際には 0 であるため、redBlock の場合、z-index プロパティを次の値より大きい任意の値に設定できます。ゼロ。

そして、最初のブロックが 2 番目のブロックと重なるようになり、最初の場合のようにその逆は起こりません。

実際には、CSS を使用してコンテンツをグループ化し、配置するという問題を解決する必要があることがよくあります。 今日は要素を水平方向の行に配置する主な方法を見ていきます。

この記事の内容は、初心者の Web デザイナーが Web ページ レイアウトのテクニックを習得できるようにすることを目的としています。

何を選択するか、方法を選択するか

構造要素を水平面に一列に配置するには、いくつかの方法があります。 実際の応用の観点から最も役立つものは次のとおりです。

• 「フロート」メソッド
• 「インラインブロック」メソッド
• テーブルセル方式

それぞれに独自の長所、用途、短所があります。 順番に見ていきましょう。

「突破口のために」またはちょっとした理論

HTML のすべての構造要素は次のように分類できます。

列をなして(内蔵) – タイプ 画像、スパンなど。 私たちには、背景を変更したり、任意の直線寸法を与えることはできません。

ブロック– 親ブロックの幅全体を占め、常に新しい行から始まります – p、h、div.

インライン構造とブロック構造の視覚的な例を以下に示します。

フロート方式

すでに知られているように (上記を参照)、ブロック要素は、指定された幅に関係なく、新しい行に配置されます ( 幅）。 したがって、横方向のサイズを小さくすると、 ディビジョン-ああ、ブロックを連続して組み立てることはできません。

(特に初心者のレイアウト設計者の間で) 最も一般的な解決方法は、プロパティを使用することです。 浮く.

CSSプロパティ 浮く表形式のレイアウト手法からブロック形式のレイアウト手法に移行した後、大きな人気と実用的な価値を獲得しました。

フロート：左（右）ブロック要素をフローティング要素に変換し、親ブロックの左 (右) 端に揃えて、テキストとその他の要素を右 (左) に折り返すように設定します。

たとえば、一列に配置する必要がある 4 つのブロックを作成してみましょう。

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >私たちは構築しています < div class = "bblock" >水平 < div class = "bblock" >行 < div class = "bblock" >ディーバから

そして、次の内容を含む外部スタイル シート:

div ( float: 左; /*ラッピングを設定します*/行の高さ: 120px; フォントサイズ: 40px; 背景: ドッジブルー; 色: 白; マージントップ: 60px; 幅: 320ピクセル; /*ブロックの幅を固定*/ }

その結果、4 つのブロックが水平の行に配置され、親ブロックの左端に揃えられます。

実際には、ブロックを親要素の右端に揃える必要がある場合があります。 前の例のブロック周辺の流れを変更してみましょう。

フロート: 右;

ブロックにある碑文に注目してください。 一見すると、この例は間違った動作をしているように見えるかもしれません。 しかし実際には、ブラウザはコードを正しく処理しました。ブラウザはブロックを上から下に読み取り、要求されたことを実行し、右に揃えました。 ご利用の際はこの点にご注意ください フロート: 右.

特定の場所からの要素の流れを中断するには、次の行を使用します。

< div style= "clear: both;" >

上の例では、インデントを使用してブロック間の距離を設定します。 右マージン。 しかし、ページをレイアウトするときに、ブロックを一列に配置して中央に配置し、ブロックの外側ではなくブロックの間のみにインデントを配置するというタスクがある場合はどうすればよいでしょうか?

動作のアルゴリズムは以下の通りです。

< div class = "wrap" > < div class = "bblock" >私たちは構築しています < div class = "bblock" >水平 < div class = "bblock" >行 < div class = "bblock" >ディーバから

ラップ (幅: 1310px; /*ラッパーの幅を修正*/マージン: 0 自動; /*中央に配置*/ 背景: darkgray; 高さ: 120ピクセル; /*ラッパーの高さを設定*/）。 bbblock (float: 左; /*ラッピングを設定します*/行の高さ: 120px; /*行の高さ + 垂直。 テキストを中央揃え*/フォントサイズ: 40px; 背景: ドッジブルー; 色: 白; 幅: 320ピクセル; /*ブロックの幅を固定*/マージン - 右: 10px; text-align: 中央; /*テキストを水平方向に中央揃えにします*/）。 ラップ : 最後の子 (マージン右: 0px; /*最後の div のフィールドを削除*/ }

その結果、次のような画像が得られます。

すべての実際的な状況を考慮することはできないため、一般的な機能に移りましょう。

重要！！！

インラインブロック方式

インライン要素とブロック要素の両方には、解決される特定のタスクごとに長所と短所があります。 それぞれの利点を組み合わせるとどうなるでしょうか?

プログラムのハイライトをご紹介 - 物件 表示: インラインブロック.

表示: インラインブロックブロックライン要素を生成します。これは本質的にはライン要素ですが、ブロックのプロパティを保持します。これにより、長さの寸法を変更したり、マージンやインデントを設定したりできます。

ブロックライン要素には次のプロパティがあります。

• ブロックの高さと幅は、コンテンツとパディング値に基づいて自動的に決定されます ( パディング)
• ブロックの高さと幅を固定的に設定できます
• 境界線を折りたたむ効果はありません。

画像とリンクを含む単純なナビゲーション メニューを作成する例を見てみましょう。

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >メニュー 1 のリンクが通常より長い < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >メニューリンク2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >メニューリンク3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >メニューリンク4

Nav (表示: インラインブロック; /*ブロックライン表示を設定します*/幅: 180ピクセル; /*ブロック幅を設定します*/背景: ドッジブルー; ）。 string ( text-align: center; /*テキストを水平方向に揃えます*/ }

その結果、次のようなメニューが得られます。

ご覧のとおり、少し曲がっていることがわかりました...しかし、動揺するつもりはないので、CSS プロパティを div に適用します。 垂直整列(詳細については以下を参照してください):

垂直配置: 上;

ナビゲーション バーが一番上の行に揃えられました。

もちろん、ここで挙げた例は初歩的なものですが、これを基にして真の傑作を作成できると確信しています。

重要！！！

• Firefox の古いバージョンの場合は、次の行を追加します。
  

  表示: - moz-インライン-スタック;

  
  そして要素を追加の div ラッパーでラップします。
• IE 7 以前のバージョン - 次の行を追加します。
  

  ズーム: 1 ; /*set hasLayout*/ * 表示: インライン; /*アスタリスク – IE 用のハック */ _高さ: 250ピクセル; /*min-height は IE6 では機能しません*/

• 特定のブラウザーがこれらの行に選択的に反応することに注意してください (最初は Firefox、残りは IE)。

テーブル方式

表形式のアプローチは、主にマークアップのシンプルさと直観性により、長い間レイアウトの標準となってきました。 おそらく、これが CSS でのテーブル書式設定の出現の原因です。

プロパティ ディスプレイ: テーブル (テーブルセル, インラインテーブル) を使用すると、HTML テーブルを使用せずに要素の表形式の書式設定を実行できます。

ブロックを水平に配置するには、次のプロパティを持つ親要素が必要です。 ディスプレイ: テーブル、およびプロパティを持つ子要素 (セル) 表示: テーブルセル:

< div class = "wrap" > < div class = "bblock" >私たちは構築しています < div class = "bblock" >表形式 < div class = "bblock" >行 < div class = "bblock" >ディーバから

Bblock (表示: 表のセル; フォントのサイズ: 32 ピクセル; 幅: 200 ピクセル; 高さ: 200 ピクセル; 背景: ゴールド; テキストの配置: 中央; 垂直方向の配置: 中央; ) 。 ラップ (表示: テーブル; 境界線の間隔: 20px 20px; 背景色: ダークグレー; )

重要！！！

1. 「Inline-block」および「float」メソッドとは異なり、Web ブラウザ ウィンドウの幅を縮小してもセルは下に移動しません。
2. 疑似テーブルのセルに margin プロパティを設定することはできません。
3. ブラウザ間の互換性。 表示のプロパティ: table* ファミリは、IE6、IE7 ではサポートされていません。 さらに、IE8 では、セルがランダムに消えるという形式の擬似表形式要素の動的レンダリングのバグが発生する場合があります。 このエラーは、ドキュメントの最初の描画中に最もよく発生します。

Web 開発者が、完成したページが視覚的にどのように見えるかについてまったく考える必要がないことを想像してください。 コードを記述するだけで、要素自体がページ上に上から下 (ブロック) および左から右 (インライン) に並んでいます。 文書内の上位にコードが記述されているほど、ページの上位に表示されます。

一般に、要素の自然な動作と、要素がページ上に表示される順序、つまりドキュメントの流れがわかります。 しかし、この順序にはまったく満足できず、ロゴを左上隅に配置し、ボタンを少し右に配置したいと考えています。 すべての要素を完全に制御する必要があり、どこに何を配置するかを決定します。 このためには、フロー内の要素の通常の動作を変更するツール (プロパティ) が必要です。 これはどのような物件ですか?

で CSSこれをポジショニングと呼ぶスタイル （位置）、それは普通かもしれません （静的）、 相対的 （相対的）そして絶対的な （絶対）.

CSS での相対位置決め

で 相対的な位置決め、ブロックは元の位置に対して相対的に移動します。 ただし、ブロックに書き込んだ後は次のようになります。

位置: 相対的。

何も起こらず、そのまま残ります。 そして、座標系がブロックを移動します (上、下、左、右)、正と負の両方の値を持ちます。

使い方？

クラスのある黄色のブロック内 ブロックイエロークラスのある赤いブロックがあります ブロック相対。 通常のフローでは、赤いブロックはコードの最後に記述されるため、黄色のブロックと重なっています。

赤いブロックを 10 ピクセル下に移動する必要があります。 これを行うには、赤いブロックの位置を強制的に変更する必要があります。 それが私たちの書き方です 上: 10px, しかし、これらの 10 ピクセルがどこから数えられるかを示す必要がありますか?

登録したこと 位置: 相対、現在の位置を基準にしてカウントしていることを明確にします。

ブロックイエロー (
背景色: #ffe70f;
}

ブロック相対 (
位置: 相対的;
上: 10ピクセル;
背景色: #ed5b77;
}

この図では、赤いブロックが元の位置から 10 ピクセル下に移動した様子がわかります。

コードから削除すると 位置: 相対そうすると、ブロックはその場に残ります。 代わりにどうなるか 相対的、 書く 絶対、デフォルトでは、これらの 10 ピクセルはブラウザ ウィンドウの端から数えられ、その結果、ブロックは逆に盛り上がって、ブラウザの下端に達します。 そしてこれは私たちの計画には含まれていませんでした。

CSS での絶対位置指定

写真の中にブロックがあります 絶対的な位置にある, これは、座標系がブラウザの端から数えられた場合に、単語を 1 つ置き換えるだけで、ブロックの位置を変更しました。

位置: 絶対;

特徴が 1 つあります。 絶対位置決めインライン要素にも影響します。 inline要素が与えられた場合 位置: 絶対、その後、ブロックのもののように動作します。 これはプロパティに似ています - 表示ブロック.

それだけではありません。「相対」親の内側にある「絶対」要素は、その座標参照点を変更し、親から離れた位置に配置され始めます。

クラスでブロックする ブロック絶対親の中にいる ブロックイエロー.

ブロックイエロー (
位置: 相対的;
パディング: 10px;
背景色: #ffe70f;
}

黄色のブロックがあるので、 相対的な位置決め、次に赤いブロック 絶対位置決め、赤を基準にして指定されたピクセルだけシフトします。

ブロック絶対 (
位置: 絶対;
下: 10ピクセル;
左: 10ピクセル;
背景色: #ed5b77;
}

固定位置

ページをスクロールすると、 位置: 固定、所定の位置に残ります。この方法は通常、ナビゲーション バーを修正するために使用されます。

Zインデックス

重複する「絶対」ブロックの順序を解決します。 赤いブロックを黄色のブロックの上に置く必要があるので、次のように示します。 z インデックス:赤の場合は 2、 z インデックス:黄色の場合は 1。

ブロックレッド (
位置: 相対的;
z インデックス: 2;
背景色: #ffe70f;
}

ブロックイエロー (
位置: 絶対;
上: 20ピクセル;
z インデックス: 1;
背景色: #ed5b77;
}

位置決めは、ブロック レイアウトにおける重要な概念の 1 つです。 一度それを理解すると、多くのことが明らかになり、レイアウトはシャーマニズムから有意義なプロセスに変わります。 したがって、この記事では CSS プロパティに焦点を当てます。 位置そして 浮く.

1. 位置: 静的

デフォルトでは、ページ上のすべての要素は静的な配置 (position: static) を持ちます。これは、要素が配置されず、ドキュメント内の通常の場所、つまり HTML マークアップと同じ順序で表示されることを意味します。

以前に設定した位置をデフォルトに変更する必要がない限り、このプロパティを要素に具体的に割り当てる必要はありません。

#content( 位置: 静的; )

2.位置:相対

相対配置 (位置:相対) では、top、bottom、left、right のプロパティを使用して、通常の位置に配置された場合に表示される位置を基準にして要素を配置できます。

#content を 20 ピクセル下に、40 ピクセル左に移動してみましょう。

#content( 位置: 相対; 上: 20px; 左: -40px; )

#content ブロックがあったはずの場所に空のスペースがあることに注目してください。 #content ブロックに続いて、#footer ブロックは下に移動しませんでした。これは、#content を移動してもドキュメント内でその場所を占めているためです。

この段階では、相対位置決めはあまり役に立たないと思われるかもしれませんが、結論を急がないようにしてください。この記事の後半で、相対位置決めが何に使用できるかを学びます。

3. 位置: 絶対

絶対配置 (位置: 絶対) では、要素がドキュメントから削除され、指定した場所に表示されます。

たとえば、#div-1a ブロックをページの右上隅に移動してみましょう。

#div-1a (位置:絶対; 上:0; 右:0; 幅:200px; )

今回は、#div-1a ブロックがドキュメントから削除されたため、ページ上の残りの要素の位置が異なっていることに注目してください。削除されたブロックの代わりに、#div-1b、#div-1c、および #footer が上に移動されました。 。 そして、ブロック #div-1a 自体は、ページの右上隅に正確に配置されています。

この方法で、ページに対して任意の要素を相対的に配置できますが、これだけでは十分ではありません。 実際、#div-1a を親 #content ブロックに対して相対的に配置する必要があります。 そしてこの時点で、相対的な位置決めが再び機能します。

4.位置: 固定

固定位置決め (位置: 固定) は、絶対位置決めのサブセクションです。 唯一の違いは、常に画面の表示領域にあり、ページのスクロール中に移動しないことです。 この点では、固定された背景画像に少し似ています。

#div-1a (位置:固定; 上:0; 右:0; 幅:200px; )

IE では、position:fixed が設定されており、すべてが期待どおりにスムーズになるわけではありませんが、それは存在します。 たくさんの方法これらの制限を回避します。

5. 位置:相対 + 位置:絶対

#content ブロックに相対位置を割り当てることで (position:相対)、その境界を基準にして子要素を配置できます。 #div-1a ブロックを #content ブロックの右上隅に配置しましょう。

#content (位置:相対; ) #div-1a (位置:絶対; 上:0; 右:0; 幅:200px; )

6. 2 つの列

前の手順の知識を活用して、相対位置と絶対位置を使用して 2 つの列を作成してみることができます。

#content (位置:相対; ) #div-1a (位置:絶対; 上:0; 右:0; 幅:200px; ) #div-1b (位置:絶対; 上:0; 左:0; 幅:200px ;)

絶対配置の利点の 1 つは、要素がマークアップ内でどのように配置されているかに関係なく、要素を任意の順序で配置できることです。 上の例では、#div-1b ブロックが #div-1a ブロックの前に配置されています。

ここで、「この例の残りの要素はどこに行ったのでしょうか?」という疑問が生じるはずです。 彼らは完璧に配置されたブロックの下に隠れました。 幸いなことに、これを修正する方法があります。

7. 高さが固定された 2 つの列

解決策の 1 つは、列を含むコンテナに固定の高さを与えることです。

#content (位置:相対; 高さ: 450px; ) #div-1a (位置:絶対; 上:0; 右:0; 幅:200px; ) #div-1b (位置:絶対; 上:0; 左:0 ;幅:200ピクセル;

列内にテキストがどのようなサイズで配置され、どのフォントが使用されるかが事前にわからないため、この解決策はあまり適切ではありません。

8.フロート

高さが可変の列の場合、絶対位置はオプションではないため、別のオプションを見てみましょう。

ブロックにフロートを割り当てることにより、ブロックを右 (または左) 端にできるだけ押し込むと、ブロックに続くテキストがブロックの周囲に流れるようになります。 このテクニックは通常、写真に使用されますが、自由に使える唯一のツールであるため、より複雑なタスクに使用します。

#div-1a (浮動小数点:左; 幅:200px; )

9.「フローティング」スピーカー

float: left を最初のブロックに割り当て、次に float: left を 2 番目のブロックに割り当てると、各ブロックは左端にプッシュされ、高さが可変の 2 つの列が得られます。

#div-1a ( float:left; width:150px; ) #div-1b ( float:left; width:150px; )

逆の float 値を列に割り当てることもできます。その場合、列はコンテナの端に沿って分散されます。

#div-1a (浮動小数点:右; 幅:150px; ) #div-1b (浮動小数点:左; 幅:150px; )

しかし、今度は別の問題が発生します。列が親コンテナを超えて拡張され、レイアウト全体が崩れてしまいます。 これはレイアウト デザイナーの初心者にとって最も一般的な問題ですが、非常に簡単に解決できます。

10. クリーニングフロート

フロートの掃除は 2 つの方法で行うことができます。 列の後に別のブロックがある場合は、それにclear:両方を割り当てるだけで十分です。

#div-1a (float:left; width:190px; ) #div-1b (float:left; width:190px; ) #div-1c (clear:both; )

または、overflow: hidden プロパティを親コンテナに割り当てます。

#content (オーバーフロー:非表示; )

いずれの場合でも、結果は同じになります。

結論

今日は、基本的な位置決めテクニックと最も単純な例のみを検討しました。 また、初心者のレイアウト デザイナーを支援するために、私は常に Ivan Sagalayev による一連の記事をお勧めします。これは、かつて私にとって非常に役立ちました。

著者より:こんにちは。 CSS 要素の配置は、Web サイト構築において非常に重要なトピックです。 この記事では、Web ページ上でブロックを移動するすべての方法をさらに詳しく見ていきたいと思います。

種類は何ですか

ブロック要素の位置について言えば、position プロパティを使用して設定されます。 これには 4 つの意味があり、それぞれを個別に検討する必要があります。

絶対位置決め

これは最初に知られた種です。 これは次のように設定されます: 位置: 絶対。 この後、ブロックは通常の特性を失い、通常の流れから完全に外れます。 この流れは何ですか？ マークアップ内に複数のブロック要素を続けて配置してみてください。 彼らはどうなるでしょうか？ 次から次へと、それ以外は何もありません。

これは、デフォルトでのブロックの通常の動作です。 しかし、絶対位置が定義されているブロックはどうなるでしょうか? これは通常のフローから完全に外れ、他のブロックはまるで存在しなかったかのように気付かなくなりますが、要素はページ上に残ります。 CSS の絶対配置は、装飾要素、アイコン、その他のデザイン要素を正確に配置するためによく使用されます。

left、right、top、bottom プロパティを使用して移動できるようになりました。 デフォルトでは、移動はブラウザ ウィンドウの端を基準としますが、親要素にposition:relativeが設定されている場合、移動は親ブロックを基準とします。

ブロック(位置: 絶対; 下: 0; 右: 0; )

ブロック （ 位置: 絶対; 下: 0; 右: 0;

要素は右下隅に移動されます。 彼らはトップボタンをこの方法で配置することが多いことに気づきました。彼らはそれを完全に隅に配置するだけです。 次に、考えられるマークアップを最初に示す別の例を示します。

< div id = "wrapper" > < div class = "block" > < / div > < / div >

そして、このフラグメントの CSS スタイルは次のとおりです。

#wrapper( 位置: 相対; ) .block( 位置: 絶対; 上: 0; 右: 10px; )

#ラッパー( 位置: 相対的; ブロック （ 位置: 絶対; トップ: 0; 右: 10ピクセル;

この例では、最初に親コンテナに相対位置を割り当て (相対 - 詳細についてはこの記事で後述します)、次に同じ element.block に絶対位置を設定します。 その結果、座標はブラウザ ウィンドウ自体からではなく、親要素、つまりラッパー ブロックの端からカウントされます。

CSS要素の相対的な配置

これは次の型で、次のように記述されます – 位置: 相対。 座標は、絶対位置の場合と同じプロパティによって指定されます。 唯一の大きな違いは、要素が正式にフローから外れないこと、つまり要素のためのスペースが残されていることです。

この値の操作は、要素がページから非表示になるが、その下のスペースは変更されないときの、visibility: hidden と比較できます。 相対配置でも同じことが起こります。ブロックはどこにでも移動できますが、そのスペースは空のままであり、他のパーツによって占有されることはありません。

オフセットは Web ブラウザ ウィンドウの端から発生するのではなく、ブロックが元々存在していた場所から発生することを知っておくことも重要です。 あれは：

ブロック(位置: 相対; 上: 10px; 右: 50px; )

ブロック （ 位置: 相対的; 上: 10ピクセル; 右: 50ピクセル;

ブロックは右に 50 ピクセル、左に 10 ピクセル移動します。

固定

インターネット上のサイトで、スクロールしているときにバナーが消えずに、一箇所に張り付いているかのように表示ゾーンに表示され続けているのを何度か見たことがあるのではないでしょうか。 これは主に固定位置を使用して実装されます。 これを行うには、次のように記述する必要があります。

位置: 静的または通常の静的位置

最後のタイプは静的で、これはブロック要素の通常の動作です。 デフォルトなので指定する必要はありませんが、4 番目の値については知っておく必要があります。 Web ページ上で特定のイベントが発生したときに、別の種類の位置決めをオーバーライドするために、position: static が記述されることがあります。

CSS でブロックを正しく配置するにはどうすればよいですか?

意味については説明しましたが、これでこのトピックを終えるには十分ではありません。 実際には、どこにどのような種類の配置を適用する必要があるかを理解する必要があります。 すでに固定の例を示しました。固定されたサイド列、ヘッダー、またはフッターを作成するために使用できます。

相対位置決めは、ブロックをその位置に対してわずかに移動し、同時にフロー内の位置を維持する必要がある場合に役立ちます。 子要素に絶対移動を使用するために親ブロックにも指定されます。

その他のテクニック: センタリング、フローティングブロック

位置プロパティは、ブロック要素の配置に関するすべての問題を解決するわけではありません。 たとえば、これを使用してサイト グリッドを作成するにはどうすればよいでしょうか? 良いアイデアがありません。 ここで他のプロパティが役に立ちます。

グリッドは多くの場合、CSS の float を使用して作成されます。 このプロパティを使用すると、ブロックを親の左端または右端に押すことができます (float: left、float: right)。これにより、どのサイトでも一般的な、複数のブロック要素を 1 行に並べることができます。

センタリングは次のように行われます。ブロックは特定の幅を書き込み、次に margin: 0 auto プロパティを設定する必要があります。 水平方向に正確に中央に配置するのは auto 値です。 当然のことながら、これを行うには、ライン内でそれが唯一のものである必要があり、そうでない場合は何も機能しません。

この記事に記載されているすべてのタイプの配置は、Web 開発者にとって役立ちます。 アイコンを挿入する必要がある場所 (位置: 絶対)、ブロックの後ろにスペースを残してブロックの位置をわずかに調整する必要がある場所 (位置: 相対)、そしてウィジェットを固定する必要がある場所 (位置: 固定)。 一般に、この特性に関する知識は決して不必要なものではありません。

ウェブサイト構築の世界からさらに学ぶには、必ずブログを購読し、新しいトレーニング資料を受け取ってください。 また、同様のトピックが取り上げられている私たちのトピックも参照することをお勧めします。 (要素の配置)