CSS の配置を深く理解し、CSS の配置、相対配置、絶対配置を完全に習得_html/css_WEB-ITnose

実際、以前の標準フローとフローティング フローは非常に理解できますが、ポジショニング、特に相対ポジショニングと絶対ポジショニングを理解するのは難しく、学習を始めたばかりの多くの生徒はそれらを区別できません。そこでここでは、Xiaoqiang 先生が CSS の配置について学習した内容を紹介します。

これまでの研究により、Web ページのレイアウト方法は次のとおりです。

1. 標準フロー (最も安定)

2. フローティング フロー (浮動 2 番目)

3. ポジショニング フロー (安定性では最後)

ポジショニングは完全にアウトof touch 標準ストリームのレイアウト方法。

実際、以前の標準フローとフローティングフローは非常に理解できますが、ポジショニング、特に相対ポジショニングと絶対ポジショニングは理解するのが難しく、学習を始めたばかりの多くの生徒はそれらを区別できません。そこでここでは、Xiaoqiang 先生が CSS の配置について学習した内容を共有します。

位置を調整するには、ほとんどの場合、上、左、下、右が使用されます。

まず、位置決めの分類を見てみましょう:

1. 絶対位置決め 絶対

位置: 絶対;

絶対位置決めと相対位置決めが比較的よく使用されます。絶対位置決めの特徴は何ですか? Xiaoqiang 先生が皆さんのためにまとめます。位定 1. 親ボックス
がない場合は、このボックスが使用され、絶対位置決め後、ブラウザの左上隅を原点として、すべての動きも原点によって移動されます。

ケースは図に示すとおりです。

プレビュー後




2. 親ボックスはあるが、親ボックスが配置されていない場合、結果は変化せず、ボックスはブラウザの左上隅を原点とします。

プレビュー後

3. 親ボックスがあり、親ボックスに位置決めがある場合、このとき絶対位置決めは親ボックスの左上隅を原点にして位置合わせします。

写真に示すように:

生成効果:




4. 絶対位置決めには非常に重要な機能があり、いかなる位置も占有せず、標準フローから完全に外れているため、上昇し、標準ストリームが占有します。

2. 相対配置(relative)

position:relative

相対配置は親ボックスの有無に関わらず左上隅を原点とする単純な配置です。

また、それは位置を占めます。つまり、その下に配置される他のボックスがあります。


3. 固定位置

位置: 固定

固定位置もブラウザに対して相対的であり、ブラウザ内の特定の位置に固定されます。 (ie6 は固定位置決めをサポートしていないため、個別に解決することしかできません)

固定位置決めは位置を占有せず、標準フローから完全に外れています。


4. 静的位置決め

position:static

標準フローとほぼ同じで、特別な位置決めはなく、位置を占有します。

5. 積み重ね順:

z-index: 数値;
値が大きいほど、ボックスが高くなります。 注意:

.one{z-index: 10;}

まとめ：

測位には、位置を占有する静的測位と相対測位と、位置を占有しない絶対測位と固定測位があります。これは非常に重要であり、標準フローのレイアウトに大きな影響を与えます。
私たちが覚えておかなければならないマントラは、子供は絶対的であり、親は相対的であるということです。これが今回のレイアウトに最も適したレイアウトコンセプトです。