##### 13 CSS 的position屬性 就像photoshop中的圖層功能會把一整張圖片分層一個個圖層一樣，網頁佈局中的每一個元素也可以看成是一個個類似圖層的層模型。層佈局模型就是把網頁中的每一個元素看成是一層一層的，然後通過定位屬性position對元素進行定位擺放，最終實現網頁的佈局。 ...
13 CSS 的position屬性
就像photoshop中的圖層功能會把一整張圖片分層一個個圖層一樣，網頁佈局中的每一個元素也可以看成是一個個類似圖層的層模型。層佈局模型就是把網頁中的每一個元素看成是一層一層的，然後通過定位屬性position對元素進行定位擺放，最終實現網頁的佈局。
定位屬性position有4個值，分別是靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）。預設就是static。所以我們略過。
元素設置了定位以後，還要依靠4個方位屬性來進行定位擺放。
方位屬性：
/*
top：讓元素相對於指定目標的頂部偏移指定的距離。
例如： top：10px; 表示距離頂部10像素
right：讓元素相對於指定目標的右邊偏移指定的距離。
例如： right：10px; 表示距離頂部10像素
bottom：讓元素相對於指定目標的底部偏移指定的距離。
例如： bottom：10px; 表示距離頂部10像素
left：讓元素相對於指定目標的左邊偏移指定的距離。
例如： left：10px; 表示距離頂部10像素
*/
- 相對定位（relative）
相對定位就是在正常文檔流中，元素相對於自身位置使用left、right、top、bottom屬性進行定位偏移。
.c1{
width: 200px;
height: 200px;
background-color: indianred;
}
.c2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 200px;
top: 200px;
}
.c3{
width: 200px;
height: 200px;
background-color: lightblue;
}
- 絕對定位（absolute）
絕對定位就是將元素脫離文檔流，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父級元素進行絕對定位，如果不存在這樣的父級元素，則預設是相對於body元素進行絕對定位。
輪播圖案例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
*{
margin: 0;
padding: 0;
}
.lunbo{
width: 590px;
height: 470px;
border: 1px solid rebeccapurple;
margin: 100px auto;
position: relative;
}
.lunbo ul{
list-style: none;
}
.lunbo .img li{
position: absolute;
top: 0;
left: 0;
}
.lunbo .btn li{
font-size: 25px;
width: 40px;
height: 40px;
background-color: gray;
text-align: center;
line-height: 40px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
color: white;
position: absolute;
top: 50%;
margin-top: -20px;
}
.lunbo .left_btn{
left: 0;
}
.lunbo .right_btn{
right: 0;
}
</style>
</head>
<body>
<div class="lunbo">
<ul class="img">
<li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
</ul>
<ul class="btn">
<li class="left_btn"> < </li>
<li class="right_btn"> > </li>
</ul>
</div>
</body>
</html>
- 固定定位（fixed）
固定定位與絕對定位有點相似，但是固定定位是使用left、right、top、bottom屬性相對於整個瀏覽器的視窗進行定位，而不再相對於某個HTML頁面元素了，所以當元素使用了固定定位以後，就算頁面的滾動條滾動了，固定定位的元素也不會變化位置。也就是說固定定位是相對於視窗的定位，不受文檔流的影響了。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
body{
margin: 0;
}
.c1{
width: 100%;
height: 2000px;
background-color: lightgray;
}
.c2{
width: 200px;
height: 60px;
background-color: yellowgreen;
text-align: center;
line-height: 60px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回頂部</div>
</body>
</html>
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17650559.html
