CSS的定位屬性

說到css的定位屬性，首先談一下css的三種定位機制。

今天介紹的是第三種定位流，他的定位屬性position有以下幾種情況

1.static：預設值；沒有定位；

2.relative：相對定位（參照物：自己所在的位置）

特點：如果沒有定位偏移量，對元素本身沒有任何影響，不使元素脫離文件流，空間會被保留，不影響其他元素布局。left、top、right、bottom是相對於當前元素自身進行偏移的，不能獨自存在，必須配合定位元素一起使用。

3. absolute : 絕對定位（參照物：包含塊―該元素的祖先級元素）

使元素完全脫離文件流使內聯元素支援寬高（讓內聯具備塊特性）

使塊元素預設寬根據內容決定（讓塊具備內聯的特性）

如果有定位祖先元素相對於定位祖先元素發生偏移，沒有定位祖先元素相對於整個文件發生偏移（絕對、相對、固定）

4. 固定定位： fixed （參照物：始終都是相對於整個瀏覽器視窗進行固定定位的）

使元素完全脫離文件流使內聯元素支援寬高（讓內聯具備內聯塊特性）

使塊元素預設寬根據內容決定（讓塊具備內聯塊的特性）

對於整個瀏覽器視窗進行偏移，不受瀏覽器滾動條的影響也不會受到祖先元素的影響。

5. 黏性定位: sticky 在沒有到達指定位置的時候，是沒有定位效果的，到達了指定位置，就變成了固定模式。

絕對定位和相對定位的區別：

1、相對定位的參照物是自己本身所在的位置，絕對定位的參照物的是包含塊

2、相對定位是不會脫離文件流的，而且不會對頁面的布局產生影響；絕對定位是會脫離文件流的，原來的位置就不在占有的，後面的內容會把位置補上去。

定位元素層次關係

z-index : auto |number

檢索或設定物件的層疊順序。

auto：預設值。number:無單位的整數值。可為負數

沒有設定z-index時，最後寫的物件優先顯示在上層，設定後，數值越大，層越靠上。

注：他只針對於具有定位屬性的元素起作用；

包含塊

包含塊絕對定位的基礎；絕對定位元素會根據包含塊進行絕對定位，預設情況下，瀏覽器的可視視窗是乙個大的包含塊，絕對定位元素會相對瀏覽器的可視視窗進行定位；如果他的祖先級元素定義了包含塊，那他就最近的祖先級元素進行絕對定位。

總結：相對來說，學習了定位元素之後，網頁上的一些功能就可以通過定位屬性來進行實現。需要多練習加以強化。