position屬性有四個屬性值可以設定,分別是static, relative, absolute, fixed


static(靜態定位)

為預設值,表示區塊保持在原本應該在的位置上,即該值沒有任何移動的效果。


relative(相對定位)

使用相對定位,除了將position屬性設置為relative之外,還需要指定一定的偏移量,水平方向透過leftright屬性來指定,垂直方向透過topbottom來指定。

  • 定位原則:
    • 使用相對定位的盒子,會相對於它在原本的位置,透過偏移指定的距離,到達新的位置。
    • 使用相對定位的盒子仍在標準串流中,它對父區塊和兄弟盒子沒有任何影響。

 

absolute(絕對定位)

  • 使用絕對定位的盒子以它的「最近」── 父親比祖父近、祖父比曾祖父近 ── 的一個「已經定位」── position屬性被設置,且被設置為不是static的任一種方式 ── 的「父項目」為基準偏移。如果沒有已經定位的父項目,那麼會以瀏覽器視窗為基準進行定位。
  • 絕對定位的框從標準串流中脫離,這意味著它們對其後的兄弟盒子的定位沒有影響,其他的盒子就當這個盒子不存在一樣。

 

fixed(固定定位)

和absolute有些類似,但定位的基準不是父項目,而是瀏覽器視窗或其它顯示裝置的視窗。

z-index空間位置:

z-index屬性用於調整定位時重疊區塊的上下位置,想像頁面為x-y軸,垂直頁面的方向為z軸,z-index值大的頁面位於值小的頁面的上方

z-index屬性可以是正數也可以是負數,默認的z-index值為0

 

創作者介紹

學習日誌

chenmike 發表在 痞客邦 PIXNET 留言(0) 人氣()