CSS學習之position屬性

 

Position:

a.static預設值

b.relative相對定位

c.absolute絕對位置

d.fixed固定定位

 

“已經定位”:含義是position屬性被設定為除static外的三種方式任意一種

“祖先元素”:當前DOM節點的上一個父節點

 

A.static:position

預設的屬性值，也就是該盒子按照標準流(包括浮動方式)進行布局

 

B.relative:

相對定位，使用相對定位的盒子的位置常以標準流的排版方式為基礎，然後使盒子相對於它在原本的標準位置位移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它

relative定位原則：1.使用相對定位的盒子，會相對於它在原本的位置，通過位移指定的距離，到達新的位置

　　　　　　　　　2.使用相對定位的盒子仍在標準流中，它對父塊和兄弟盒子沒有任何影響

 

C.absolute:

絕對位置，盒子的位置以它的包含框為基準進行位移。絕對位置的盒子從標準流中脫離。這意味著它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子存在一樣。

absolute定位原則:1.使用絕對位置的盒子以它的“最近”的一個“已經定位”的“祖先元素(或上階項目)”為基準進行位移。如果沒有已經定位的祖先元素(上級元　　　　　　 　　　　素），那麼會以瀏覽器視窗為基準進行定位

　　　　　　　　 2.絕對位置的框從標準流中脫離，這意味著它們對其後聽兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣

D.fixed:

固定定位，它和絕對位置類似，只是以瀏覽器視窗為基準進行定位，也就是當拖動瀏覽器視窗的捲軸時，依然保持對象位置不變。