絕對定位
position:
absolute
特性：
1、脫離文檔流，定位元素占據的位置會釋放
2、原點計算：如果該元素做了定位，那么就去找它做了定位的父元素（找最近的）作為原點基準，如果父元素都沒做定位，則以瀏覽器(0,0)作為原點基準。
3、對內嵌元素定位后，設置寬高屬性就會有效果
應用場景：
一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景
相對定位
position:
relative
1、不脫離文檔流，定位元素占據的位置不會被釋放/
2、原點計算：以父級元素作為原點基準，若沒有父級元素則以瀏覽器(0,0)為基準。
一般的應用：父相子絕
3、父元素為相對定位，子元素為絕對定位，文檔元素不會受影響。
4、父元素提供相對定位后，子元素以父元素為基準來進行定位。
應用場景：
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設置偏移量
固定定位
position:
fixed
1、脫離了文檔流
2、原點計算：以瀏覽器(0,0)作為原點基準，盡管父元素做了定位也不會影響它的原點
基準。
應用場景：
一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等
注意：使用定位后會激活如下5個屬性
left | right | top | bottom | z-index
z-index
改變定位后的疊放順序
取值范圍：-1~9999
其他：
設置網頁元素的透明度
opacity: 0~1;
filter: opacity(0.2) | contrast(0.2)
絕對定位（absolute）代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位</title>
<style type="text/css">
/*絕對定位：
*1、脫離文檔流，做了定位后它占據的位置會釋放。
*2、原點計算：如果該元素做了定位，那么就去找它做了定位的父元素（最近）作為原點基準，若果父元素
* 都沒做定位，則以瀏覽器(0,0)作為原點基準。
*3、對內嵌元素做了定位后，它的寬度高度屬性就會有效。
*/
*{
padding: 0px;
margin: 0px;
}
.box-father{
width: 500px;
height: 500px;
margin-left: 500px;
background-color: yellow;
position: absolute;
}
.son{
width: 400px;
height: 400px;
margin-left: 20px;
background-color: black;
position: absolute;
}
.box{
width: 300px;
height: 300px;
background-color: blue;
/*絕對定位*/
position: absolute;
/*激活4個屬性*/
left: 150px;
/*right: ;*/
top: 100px;
/*bottom: ;*/
}
.box2{
width: 400px;
height: 400px;
background-color: red;
}
span{
width: 200px;
height: 200px;
background-color: green;
/* position: absolute;*/
float: left;
}
</style>
</head>
<body>
<div class="zx"> <!-- 祖先 ：定位-->
<div class="box-father"> <!-- 爺爺 ：定位-->
<div class="son"> <!-- 兒子：定位-->
<div class="box"> <!-- 孫子：如果孫子做了定位，它就去找接近它定位最近的父元素來做為基準 -->
</div>
</div>
</div>
</div>
<div class="box2">
</div>
<span>我是span</span>
</body>
</html>
相對定位（relative）代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
/*相對定位：
*1、沒有脫離文檔流,元素定位了占據的空間不會被釋放
*2、原點計算：根據父元素的位置來做基準，如果沒有父元素則以瀏覽器（0,0）作為基準。
* 父相子絕：
* 1、文檔元素不會受影響
* 2、父元素提供相對定位后，子元素就以父元素為基準來做絕對定位。
*/
*{
padding: 0px;
margin: 0px;
}
.box-father{
width: 500px;
height: 500px;
margin-left: 100px;
background-color: yellow;
/*相對定位*/
/*position: relative;
left: 100px;*/
}
.box{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
right: 0px;
bottom:0px;
}
.box-one{
width: 400px;
height: 400px;
background-color: red;
}
/*.box2{
width: 400px;
height: 400px;
background-color: red;
}*/
</style>
</head>
<body>
<div class="box-father">
<div class="box-one">
</div>
<div class="box">
</div>
</div>
<!--<div class="box2">
</div>-->
</body>
</html>
固定定位（fixed）代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/*固定定位：
*1、脫離了文檔流
*2、原點計算：按瀏覽器(0,0)來作為基準
*/
*{
padding: 0px;
margin: 0px;
}
body{
height: 1800px;
background-image: url(img/logo.png);
}
.box-father{
width: 500px;
height: 500px;
background-color: yellow;
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: blue;
/*固定定位*/
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="box-father">
<div class="box">
</div>
</div>
</body>
</html>
