一、簡介
定位就是指將元素擺放在頁面的任意位置，通過定位可以任意的擺放勻速，通過position可以設置元素的定位
可選值：
- static: 默認值，元素沒有開啓定位
- relative: 開啓元素的相對定位
- absolute: 開啓元素的絕對定位
- fixed: 開啓元素的固定定位
二、相對定位
1. 如何設置
(1) 設置position屬性爲relative
(2) 設置偏移量，通過left，right，top，bottom四個屬性來設置元素的偏移量
- left: 元素相對其定位位置的左側偏移量
- right: 元素相對其定位位置的右側偏移量
- top: 元素相對其定位位置的上邊偏移量
- bottom: 元素相對其定位位置的下邊偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 當開啓了相對定位後，不設置偏移量，元素不會發生任何變化
(2) 相對定位是相對於元素在文檔流中原來的位置進行定位
(3) 相對定位元素不會有脫離文檔流
(4) 相對元素會使元素提高一個層級
(5) 相對定位不會改變元素的性質，塊還是塊，內聯還是內聯
(6) 通常只需要兩個就可以對一個元素進行定位，使用水平方向或垂直方向的偏移量來對一個元素進行定位
三、絕對定位
1. 如何設置
(1) 設置position屬性爲absolute
(2) 設置偏移量，通過left，right，top，bottom四個屬性來設置元素的偏移量
- left: 元素相對其定位位置的左側偏移量
- right: 元素相對其定位位置的右側偏移量
- top: 元素相對其定位位置的上邊偏移量
- bottom: 元素相對其定位位置的下邊偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 當開啓了絕對定位後，不設置偏移量，元素不會發生任何變化
(2) 絕對定位元素會脫離文檔流
(3) 絕對定位是相對於元素最近的開啓的定位的祖先元素的位置進行定位
(4) 如果所有的祖先元素都沒有開啓定位，則相對於瀏覽器的窗口進行定位
(5) 一般情況下開啓了元素的絕對定位後都會同時開啓父元素的相對定位
(6) 絕對定位會使元素提升一個層級
(7) 絕對定位會改變元素的性質，內聯元素會變成快元素，塊元素的高度和寬度會被內容撐開
四、固定定位
1. 如何設置
(1) 設置position屬性爲fixed
(2) 設置偏移量，通過left，right，top，bottom四個屬性來設置元素的偏移量
- left: 元素相對其定位位置的左側偏移量
- right: 元素相對其定位位置的右側偏移量
- top: 元素相對其定位位置的上邊偏移量
- bottom: 元素相對其定位位置的下邊偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/** {
padding: 0;
margin: 0;
}*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: fixed;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 固定定位是一種絕對定位
(2) 固定定位相對於瀏覽器窗口進行定位
(3) 固定定位會固定在瀏覽器的窗口中，不會隨滾動條滾動
(4) IE6不支持固定定位
五、層級
通過z-index屬性可以設置元素的層級，給z-index指定一個正整數，該值會作爲當前元素的層級，層級越高，越優先顯示
1. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2. 注意
(1) 沒有開啓定位的元素不能使用z-index
(2) 父元素的層級再高，也不會蓋住子元素
