就像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">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer .img img{
width: 590px;
height: 470px;
}
.outer{
width: 590px;
height: 470px;
margin: 100px auto;
position: relative;
border: 1px solid red;
}
.outer ul{
list-style: none;
}
.outer .img li{
position: absolute;
top: 0;
left: 0;
}
.outer .hide{
display: none;
}
.outer .num{
position: absolute;
z-index: 100;
bottom: 16px;
left: 16px;
}
.outer .num li{
display: inline-block;
width: 16px;
height: 16px;
background-color: lightgray;
text-align: center;
line-height: 16px;
border-radius: 50%;
margin-left: 5px;
}
.num li.current{
background-color: red;
}
.btn li{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: gray;
text-align: center;
line-height: 60px;
color: white;
margin-top: -30px;
}
.btn .left_btn{
left: 0;
}
.btn .right_btn{
right: 0;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt=""></a></li>
<li class="hide"><a href=""><img src="https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt=""></a></li>
<li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt=""></a></li>
<li class="hide"><a href=""><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt=""></a></li>
</ul>
<ul class="num">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></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>