css定位詳解

定位也是用來布局的，它有倆部分組成：

定位=定位模式+邊偏移

邊偏移

簡單說，我們定位的盒子，是通過邊偏移來移動位置的。

在css中，通過top、bottom、left和right屬性定義元素的邊偏移

top：頂端偏移量，定義元素相對於其父元素上邊線的距離

bottom：底部偏移量，定義元素相對於其父元素下邊線的距離

left：左側偏移量，定義元素相對於其父元素左邊線的距離

right：右側偏移量，定義元素相對於其父元素右邊線的距離

定位的盒子有了偏移才有價值。一般情況下，凡是有定位地方必定有邊偏移

定位模式（position）

在css中，通過position屬性定義元素的定位模式，語法如下：

選擇器定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式值語義

static

靜態定位

relative

相對定位

absolute

絕對定位

fixed

固定定位

靜態定位（static）

靜態定位是元素的預設定位方式，無定位的意思。它相當於border裡面的none，不要定位的時候用。

靜態定位 按照標準流特性擺放位置，它沒有邊偏移

靜態定位在布局時幾乎不用

相對定位（relative）

特點：相對於自己原有在標準流中位置來移動

原來在標準流的區域繼續占有，後面的盒子仍然以標準流的方式顯示

絕對定位（absolute）

1、完全脫標——完全不佔位置

2、父元素沒有定位，則以瀏覽器為準定位（document文件）

3、父元素有定位（position：relative）以父級的左上角為基點

4、將元素依據最近的已經定位（絕對、固定或相對）的父元素進行定位

固定定位（fixed）

1、完全脫標——完全不佔位置

2、只認瀏覽器的可是視窗——瀏覽器可是視窗+邊偏移屬性來設定元素的位置；

● 跟父元素沒有任何關係

● 不隨滾動條滾動

堆疊順序（z-index）

在使用定位布局時，可能會出現盒子重疊的情況

加了定位的盒子，預設後來者居上，後面的盒子會壓住前面的盒子

應用z-index層疊等級屬性可以調整盒子的堆疊順序

z-index特性：

1、屬性值：正整數、負整數或0，預設值是0，數字越大，盒子越靠上

2、如果屬性值相同，則按照書寫順序，後來者居上

3、數字後面不能加單位

注意：z-index只能應用於相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效

css 定位詳解

定位模式 static 靜態定位 幾乎不用 relative 相對定位 1 相對於原來在標準流中的位置來說的 2 在原來標準流的區域繼續占有,後面盒子仍然以標準流方式對待它，後面盒子不會動 相對定位 水平居中方法 1 margin 0 auto absolute 絕對定位 是元素帶有定位的父級元素來...

詳解css 定位與定位應用

原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,r...

CSS定位屬性詳解

最近學習css相關知識，定位是其中的乙個難點。不了解其中細節，有時候在使用的時候會弄得一團糟。本篇文章整理下關於定位屬性的具體理解與應用。在介紹postion之前，有必要先了解下文件流。簡單說就是元素按照其在 html 中的位置順序決定排布的過程。html的布局機制就是用文件流模型的，即塊元素 bl...