CSS定位position

position屬性

         position是css的一個定位屬性，經過指定元素的定位方式，來設置元素的位置

---

position屬性值

static	position屬性默認值，不爲元素設置定位方式，元素會按照文檔流中位置正常顯示。也可用來取消以前設置的定位。
absolute	絕對定位，徹底脫離文檔流，以包含塊爲參照物進行定位（設置top，bottom，left，right屬性肯定元素位置）
relative	相對定位，不脫離文檔流，以自身原位置爲參照物進行定位（設置top，bottom，left，right屬性肯定元素位置）
fixed	固定定位，徹底脫離文檔流，以瀏覽器窗口爲參照物進行固定定位（設置top，bottom，left，right屬性肯定元素位置）
stycky	粘性定位，元素隨着窗口的滾動 到達指定位置的時候 ，會表現爲固定定位的模式。

---

position各屬性值用法

• static

默認值，不爲元素設置定位。不多使用，若是想要取消一個元素以前的定位設置，能夠爲該元素設置position屬性設置爲static    

• relative（相對定位）

以自身位置爲參照物進行定位，元素不脫離文檔流，不影響其餘元素的佈局位置

<div class="box"> <h3>相對定位</p> <p>我有一隻小豬豬！我有一隻小豬豬！我有一隻小豬豬</p> </div>

*{margin: 0;padding: 0;} .box{margin: 50px;width: 500px;height: 300px;border: 2px solid red;font-size: 30px;} h3{ width: 200px; height: 50px; background: yellow; } p{ width: 200px; height: 200px; background: green; }

​

一個div內含一個h3和p標籤

（1）爲h3設置position：relative；

h3{ width: 200px; height: 50px; background: yellow; position: relative; }

​

（2）再爲h3添加 top:100px;  left:100px;

h3{ width: 200px;height: 50px;background: yellow; position: relative; top: 100px; left: 100px; }

​

• absolute（絕對定位）

以設置position：absolute/relative/fixed的父級元素爲參照物，若父級元素都未定位，則會以body爲參照物進行定位（設置top，bottom，left，right屬性肯定元素位置）

絕對定位的元素會徹底脫離文檔流，元素在普通流中再也不佔據位置

（1）爲h3設置position：absolute；

​

p標籤上浮且被設置了position：absolute；的h3 遮蓋，說明 h3已經脫離了普通文檔流

（2）給h3添加 top:10px;  left:10px;

​

設置top，bottom，left，right屬性後的h3  並非相對於box定位的  而是相對於body進行定位

這裏涉及一個定位的使用小技巧：position：relative；和position：absolute；聯合使用。爲想要進行絕對定位的元素的父級元素設置position：relative；既不會影響改變父級元素的位置，又可使其變成該元素的參照物。

.box{ margin: 50px;width: 500px;height: 300px;border: 2px solid red;font-size: 30px; position: relative; } h3{ width: 200px;height: 50px;background: yellow; position: absolute; top: 10px; left: 10px; }

​

• fixed（固定定位）

徹底脫離文檔流，以瀏覽器窗口爲參照物進行固定定位（設置top，bottom，left，right屬性肯定元素位置）

例如在瀏覽網頁時的那些小廣告，不管你怎麼滾動頁面它都會保持在網頁窗口的固定位置不變。

​

• sticky （粘性定位）

元素隨着窗口的滾動 到達指定位置的時候 ，會表現爲固定定位的模式。能夠理解爲元素在到達指定位置前position屬性值爲position:relative滾動到指定位置後會變爲 position:fixed，回到原位置後又會變回position:relative

注意：一、sticky 效果的實現依賴於用戶的滾動

                  二、必需要設置top，bottom，left，right其中之一才能實現粘性定位效果，不然元素位置不會變化

​

---

z-index：

設置定位元素的層疊順序

z-index：number; 

number ：數值不一樣，比大小（數越大，層級越高，越優先顯示）

                 數值相同，比位置（書寫位置靠後的，顯示在上層）