CSS の位置プロパティの詳細については、こちらをご覧ください。-CSSチュートリアル-php.cn

CSS の位置プロパティの詳細については、こちらをご覧ください。

零下一度

リリース： 2017-05-04 17:33:34

オリジナル

1994 人が閲覧しました

私がフロントエンドの知識を書いているのを見ているプログラマが私と同じ気持ちを持っているかどうかはわかりませんが、HTML構造を書き終えてCSSスタイルのコンテンツを書くたびに、私は心の中である感情を抱きます。実装後、ctrl+save 本当に違います、本当に残念な気持ちになります。
position属性については、設定するたびに多かれ少なかれ驚かされます。 2、3回面接を受けましたが、この質問はされなかったので、それでも良かったと思いました。

この属性には合計 4 つの値があります。

静的
静的位置決めデフォルトのレイアウト。ブロックレベルの要素の場合、ページの上から下に積み重ねられます。インライン要素の場合は、1 行で左から右に続きます。収まらない場合は、別の行に折り返されます。
は、ドキュメント内の元の位置を基準にして要素を配置します。
top
、left、bottom、left の 4 つの属性値を使用して位置を変更します。上記はわかりやすいですね。
“
ここで理解するのは難しいです。要素の相対的な配置では、要素が元々占めていたスペースから要素の距離が 20px になる場合、その要素が元々占めていたスペースが保持されます。 . スペースの上部の 20 ピクセル。つまり、要素は 20 ピクセル下に移動しましたが、ページ上の他の要素は変更されていません絶対配置
注意すべき点: ここでは、絶対配置によってインライン要素をブロックレベルの要素に変換できることが書かれています。しかし、確実に言えるのは、インライン要素が絶対配置されると、その要素の位置を把握するのが難しいということです (理由: 要素に内部
margins が設定されておらず、前後左右に絶対配置された要素がない場合、と右に配置すると、要素は一時的に元の位置に留まりますが、要素にマージンが設定されている場合、前、後、左に絶対配置された要素が設定されている場合、要素は一時的に元の位置から 1 マージン離れた位置に留まります。、右に配置すると、要素は絶対に配置されていない要素の下を探します。) したがって、絶対配置を設定する場合は、上と左を配置する必要があります。要素をすぐに削除します。

配置コンテキストの理解: 配置された要素の位置を別の要素を基準にして移動すると、「別の要素」がその要素の配置コンテキストになります。絶対配置要素の任意の祖先要素は、対応する祖先要素をposition:relative;に設定するだけで、その配置コンテキストになることができます。
その祖先要素に相対位置が設定されていない場合、絶対要素のデフォルトの位置コンテキストは body になります。

fixed 固定配置
絶対配置もドキュメントフローを完全に削除します。ただし、その配置コンテキストはビューポート、つまりブラウザウィンドウです。
固定位置は一般的には使用されません。最も一般的な状況は、Web ページのスクロールに合わせて移動しない
を作成するために使用することです。

私が練習するときに最も慣れているのは、親要素を相対的に配置し、配置する必要がある子要素を絶対的に配置することです。
一部の Web ページでは親要素の絶対位置も指定されており、子要素は親要素に対して絶対的に相対的に配置されますが、親要素の位置を再度配置する必要があるため、この方法で記述することは好きではありません。。