ポジションについてどれくらい知っていますか？ _html/css_WEB-ITnose

レイアウトに慣れていない人は、位置決めを使用する傾向があります。ポジショニングの概念が理解しやすいと思われるからです。表向きは、ブロック要素がどこにあるかを正確に指定すると、そこに配置されます。ただし、最初に見たときよりも配置が少し複雑になります。ポジショニングについては、初心者がつまずく可能性のある点がいくつかあるため、それが通常のスキルになる前にマスターする必要があります。

仕組みをもっと深く理解すると、より良いものが作れるようになります。

CSSボックスモデルの種類とポジショニング

ポジショニングを理解するには、まずCSSボックスモデルを理解する必要があります。前の文のリンクは、InstantShift のボックス モデルについて書いた記事です。その記事で詳しく説明しましたが、この記事では簡単に要約します。

CSSでは、各要素は長方形のボックスに収まります。各ボックスには、パディングで囲まれたコンテンツ領域、パディングの外側のボックスの境界線、および他のボックスから分離するための境界線の外側のマージンがあります。これは下の写真で見ることができます。

配置モードでは、レイアウト全体のどこにボックスを配置するか、また周囲のボックスにどのような影響を与えるかを指定します。配置モードには、通常のドキュメント フロー、フローティング、およびいくつかのタイプの位置配置要素が含まれます。

CSSのpositionプロパティは5つの値を取ることができます:

position:Absolute

position:relative

position:fixed

position:static

position:inherit

最初の3つの値について詳しく説明します以下では、最後の 2 つの値を詳しく説明し、簡単に説明します。

staticはpositionのデフォルトの属性値です。 Position:static が適用される要素はすべて、通常のドキュメント フロー内にあります。それがどこに配置され、周囲の要素にどのような影響を与えるかは、ボックス モデルによって決まります。

静的に配置された要素は、top、right、bottom、left、z-index 属性の宣言された値をすべて無視します。要素でこれらのプロパティのいずれかを使用するには、最初に次の 3 つの値のいずれかをその位置プロパティに適用する必要があります: 絶対、相対、固定

位置値が継承の要素と継承された値他のすべてのプロパティについても、要素には親要素と同じ位置値が適用されているだけです。

絶対配置

絶対配置の要素は、通常のドキュメントフローから完全に分離されます。絶対に配置された要素は、周囲の要素に関する限り、存在しないものとして扱われます。あたかも表示プロパティが none に設定されているかのようです。他の要素に埋もれずにその位置を維持したい場合は、他の配置方法を使用する必要があります。

絶対配置要素の位置は、top、right、bottom、leftの4つの属性で設定できます。ただし、通常は上または下、左または右の 2 つだけを設定します。デフォルトでは、それらの値は auto です。

絶対位置を理解する鍵は、その開始点がどこにあるのかを知ることです。 top が 20px に設定されている場合、20px がどこから計算されるかを知る必要があります。

絶対配置要素の開始位置は、位置値が静的ではない最初の親要素に対して相対的です。親要素チェーン内に条件を満たす親要素がない場合、絶対配置要素がドキュメント ウィンドウを基準にして配置されます。はぁ！

「相対」という概念について少し混乱しているかもしれません。特に、まだ話していない相対ポジショニングと呼ばれるものがあるためです。

要素のスタイルにposition:absoluteを設定すると、親要素を考慮する必要があり、親要素の位置の値が静的でない場合、絶対位置の要素の開始点は親要素の左上隅。

親要素が静的以外の位置決めを適用していない場合、親要素の親要素に非静的位置決めが適用されているかどうかをチェックします。要素に位置決めが適用される場合、要素の左上隅が要素の絶対的な開始点になります。そうでない場合は、位置決めされた要素が見つかるか、検索がブラウザの最も外側のウィンドウに到達しないまで、DOM を上方向にトラバースし続けます。

相対配置

相対的に配置された要素も、上、右、下、左の 4 つの属性に基づいて位置を決定します。ただし、それは元の位置との相対的なものにすぎません。ある意味、要素の相対位置の設定は要素にマージンを追加することに似ていますが、重要な違いがあります。違いは、相対的に配置された要素の周囲の要素は、相対的に配置された要素の動きを無視することです。

実際の写真の位置から少しずれた写真の幽霊像と考えることができます。元のイメージが占めていた位置はまだ保持されていますが、もはやそれを見ることはできず、その幽霊だけが見えます。これにより、相対的に配置された要素が他の要素が占めるスペースに移動できるため、要素をオーバーラップさせることができます。

相対的に配置された要素は、通常のドキュメント フローから外れますが、それでも周囲の要素に影響を与えます。これらの要素は、相対的に配置された要素がまだ通常のドキュメント フロー内にあるかのように動作します。

この相対的な位置がどこにあるのかを尋ねる必要はもうありません。なぜなら、この相対的な位置は明らかに通常の文書の流れだからです。相対位置決めは要素にマージンを追加するのと少し似ていますが、隣接する要素には何も起こりません。しかし、実際にはマージンは追加されません。

固定位置決め

固定位置決めは絶対位置決めと同じように動作しますが、いくつかの違いがあります。

まず、固定配置は常にブラウザウィンドウを基準にして配置され、その位置はどのプロパティのtop、right、bottom、leftのプロパティによって決まります。親要素を放棄しており、その位置付けが少し反抗的です。

二つ目の違いは、名前が継承されることです。固定配置された要素は固定されます。ページがスクロールされても動きません。要素の位置を通知し、それを再度移動する必要はありません。おお～なかなか行儀が良さそうですね。

ある意味、固定位置要素は固定背景画像に似ていますが、外側のコンテナブロックが常にブラウザウィンドウである点が異なります。本文に背景画像を設定すると、固定配置された要素と非常によく似た動作になりますが、位置決めの精度は若干低くなります。

背景画像は3次元ではサイズを変更できないため、z-index属性が発生します。

平面を壊すZ-Index

このページは二次元平面です。幅と高さがあります。私たちは、深さとして Z インデックスを使用する 3 次元の世界に住んでいます。この追加の次元は平面を横切って移動することができます。

上の図からわかるように、高い z-index は低い z-index の上に位置し、ページの上部に向かって移動します。逆に、低い Z インデックスは高い Z インデックスより下にあり、ページの下に移動します。

z-indexがないと要素の配置が少し面倒になります。 z-index を使用すると、配置された 1 つの要素を別の要素の上または下に配置できるため、創造的な作業が可能になる場合があります。すべての要素のデフォルトの z-index 値は 0 であり、z-index に負の値を使用できます。

z-indexは実際にはここで説明するものよりも複雑ですが、詳細は別の記事で説明します。ここで、この追加の次元とその重なり順の基本概念を覚えておいてください。また、z-index 属性は位置決めされた要素にのみ適用できることも覚えておいてください。

配置の問題

要素の配置にはよくある問題がいくつかあり、それらはすべて理解する価値があります。

1. 位置決め属性とフロートを同じ属性に適用することはできません。 2 つの命令は、使用する位置決めスキームと競合するためです。両方のプロパティを同じ要素に追加する場合は、CSS 内の後のプロパティが使用するプロパティであることが期待されます。

2.絶対要素ではマージンは崩れません 。 margin-bottom が 20px の段落があるとします。段落の後には、上マージンが 30 ピクセルの画像が表示されます。この場合、段落と画像の間のスペースは 50px (20px+30px) ではなく、30px (30px > 20px) になります。これはマージン崩壊と呼ばれ、2 つのマージンが 1 つのマージンにマージ (崩壊) します。

絶対配置された要素は、そのようにマージンが崩れることはありません。これにより、予想とは異なる結果になる可能性があります。

3.IE には Z-index にいくつかのバグがあります。 IE 6 では、select 要素は、その z インデックスや他の要素の z インデックスに関係なく、常にスタックの先頭にあります。

IE 6 と IE 7 にはスタッキング レベルで別の問題があります。 IE 6 は、個々の要素自体の階層ではなく、最も外側に位置する要素の階層を使用して、どの要素グループが階層の最上位にあるかを決定します。

<div style="z-index: ">   <p style="z-index: 1"></p> </div><img style="z-index: " />

上記の構造では、段落要素がスタックの最上位にあることが予想されます。それは最大の z-index 値を持つためです。ただし、IE 6 と IE 7 では、画像は段落の上にあります。 img の z-index レベルが div よりも高いためです。したがって、それはすべての div の子になります。

概要

要素に設定されたposition属性は、CSS配置モードのいずれかに従って動作します。位置決めされた要素には、絶対、相対、固定、静的 (デフォルト)、継承のいずれかを設定できます。

配置モードと CSS 配置要素は、ボックスがレイアウト内のどこに配置されるかを定義し、その周囲の要素は配置要素の影響を受けます。

z-index 属性は、位置決めされた要素にのみ適用できます。ページに 3 番目の次元を追加し、要素の階層順序を設定します。

positioning 属性は分かりやすそうですが、その動作は表面上のものとは少し異なります。相対位置決めは絶対位置決めに似ていると思われるかもしれません。レイアウトをデザインするとき、フロートを使用し、特定の要素に位置を適用してレイアウトを分割したいことがよくあります。

翻訳者の手話: 翻訳全体は原文の行に従って実行され、テクノロジーに関する個人的な理解が翻訳プロセスに追加されます。翻訳に間違いがある場合は、同僚に指摘してもらってください。ありがとう！