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

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

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

  
  

• 静的

  静的位置決めデフォルトのレイアウト。ブロックレベルの要素の場合、ページの上から下に積み重ねられます。インライン要素の場合は、1 行で左から右に続きます。収まらない場合は、別の行に折り返されます。
  

relative 相対配置
• は、ドキュメント内の元の位置を基準にして要素を配置します。

  top
  、left、bottom、left の 4 つの属性値を使用して位置を変更します。 上記はわかりやすいですね。
  “
  ここで理解するのは難しいです。要素の相対的な配置では、要素が元々占めていたスペースから要素の距離が 20px になる場合、その要素が元々占めていたスペースが保持されます。 . スペースの上部の 20 ピクセル。つまり、要素は 20 ピクセル下に移動しましたが、ページ上の他の要素は変更されていません 絶対配置

。絶対配置が完了すると、要素がドキュメント フローから削除され、以前に要素が占めていたスペースも回収されます。絶対配置された要素は、配置コンテキストに基づいて配置されます。
• 注意すべき点: ここでは、絶対配置によってインライン要素をブロックレベルの要素に変換できることが書かれています。しかし、確実に言えるのは、インライン要素が絶対配置されると、その要素の位置を把握するのが難しいということです (理由: 要素に内部

  margins が設定されておらず、前後左右に絶対配置された要素がない場合、と右に配置すると、要素は一時的に元の位置に留まりますが、要素にマージンが設定されている場合、前、後、左に絶対配置された要素が設定されている場合、要素は一時的に元の位置から 1 マージン離れた位置に留まります。 、右に配置すると、要素は絶対に配置されていない要素の下を探します。) したがって、絶対配置を設定する場合は、上と左を配置する必要があります。要素をすぐに削除します。
  
  配置コンテキストの理解: 配置された要素の位置を別の要素を基準にして移動すると、「別の要素」がその要素の配置コンテキストになります。 絶対配置要素の任意の祖先要素は、対応する祖先要素をposition:relative;に設定するだけで、その配置コンテキストになることができます。

  その祖先要素に相対位置が設定されていない場合、絶対要素のデフォルトの位置コンテキストは body になります。

  
  
  
  fixed 固定配置

  絶対配置もドキュメント フローを完全に削除します。ただし、その配置コンテキストはビューポート、つまりブラウザ ウィンドウです。

  固定位置は一般的には使用されません。最も一般的な状況は、Web ページのスクロールに合わせて移動しない
ナビゲーション
• を作成するために使用することです。

  
  
  私が練習するときに最も慣れているのは、親要素を相対的に配置し、配置する必要がある子要素を絶対的に配置することです。

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

1.
無料のCSSオンラインビデオチュートリアル

3.

php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSS の位​​置プロパティの詳細については、こちらをご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。