CSSにおけるPositionの使い方を詳しく解説。

1年前、ある企業に面接に行ったとき、ポジションにはどんな特徴があるのか​​と聞かれたとき、2に答えるのに長い時間がかかったのを覚えています。おそらく、この2つが私たちがよく使う2つであることは誰もが知っているでしょう（相対的、絶対的）。 ）。

最近よく使って、徹底的に勉強しました。

1. 文法:

位置: 固定相対 |

値: static: デフォルト値。特別な配置はなく、オブジェクトは通常のドキュメント フローに従います。上、右、下、左などの属性は適用されず、デフォルト値が適用されます。
相対: 相対配置。オブジェクトは通常のドキュメント フローに従いますが、上、右、下、左、その他の属性に基づいて通常のドキュメント フロー内でオフセットされます。
絶対: 絶対的な配置。オブジェクトは通常のドキュメント フローから分離されており、絶対的な配置に上、右、下、左などの属性を使用します。そして、そのカスケードは z-index 属性によって定義されます。
fix: オブジェクトは通常のドキュメント フローから分離されます。スクロール バーが表示されると、オブジェクトはそれに合わせてスクロールしません。上、右、下、左などの属性を使用します。

2 番目と 4 つの属性の詳細な紹介:

1、静的、デフォルト値 ここで、ドキュメント フローの定義について言及する必要があります。多くの本ではドキュメント フローの概念について簡単に説明されていますが、実際にはドキュメント フローについて説明しています。 はドキュメントの出力順序です。これは通常、Web ページ内の各要素が左から右、上から下の順序で並べ替えられて表示されます。 2 つの位置属性により、ドキュメント フローから要素を分離して表示できます。

デフォルト値では、要素は変更を加えずにドキュメント フローに従って表示され続けます。

2、相対、相対位置

相対位置決めの最大の特徴の 1 つは、位置決めによって逃げた後も元の位置を占め、テキスト フローなどの周囲のオブジェクトに位置を与えないことです。相対位置決めも比較的独立しています。位置決めの際に、それ自体の位置 (オブジェクト自体を基準とした) によってオフセットされます。位置自体は変更されていますが、要素が元々占めていた物理的空間はまだ存在します。また、別の要素の相対的な位置は、他の隣接する要素に影響を与えません。

3、絶対、絶対位置決め

位置が絶対に設定されると、設定された要素は、それを含む要素内の指定された座標(X座標、Y座標)に定義されます。

例: 位置: 絶対; 左: 20 ピクセル; このコンテナは常にブラウザの左から 20 ピクセル、ブラウザの上から 80 ピクセルの位置にあります。ウィンドウ サイズによって変化することはなく、特定の座標軸に固定されるだけです;

4、固定位置、固定

理論的には、固定に設定された要素はブラウザ ウィンドウ内の指定された座標に配置され、ウィンドウがスクロールされているかどうかに関係なく、この位置に固定されます。ただし、現在 IE6 ではサポートされていません。

Ie6処理方法:

リーリー

HTML の合計例:

リーリー

 

显示：

 

三、position注意事项

1、当Position属性值为Relative时对象原来占有的位置保留，其后面 的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部 的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂 直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起 作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

 

五、positon 与 display
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内联元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，

例如：打算为span元素指定大小，并绝对定位

<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="position:absolute; width:100px; height:50px;"</span><span style="color: #0000ff;">></span>span<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #000000;">这是完全正确的，
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="position:absolute; display:block; width:100px; height:100px;"</span><span style="color: #0000ff;">></span>span<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>，这里的display:block就是多余的了。

 

六、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。