position屬性

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

position屬性值

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

注意：1、sticky 效果的實現依賴於使用者的滾動

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

​

z-index：

設定定位元素的層疊順序

z-index：number;

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

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