position 屬性規定元素的定位類型。
這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。
常用的值：
1.relative （相對定位）：生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 left 位置添加 20 像素。
2.absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
3.fixed （固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
4.static （默認值）：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
5.inherit：規定應該從父元素繼承 position 屬性的值。
relative
元素會相對於它原來的位置偏移某個距離，元素原來所佔的空間會被保留。
使用場合：1.元素位置微調。
2.與absolute的結合使用
absolute
1.絕對定位的元素會脫離文檔流即不佔據頁面空間（可能壓在其他元素上面），處理堆疊效果
2.絕對定位的元素會相對於離他最近的已定位的祖先元素去定位
3.如果沒有沒有已定位的祖先元素，那麼就會相對於最初的包含塊去實現定位，比如body或者html
特點：絕對定位的元素會變成塊級元素
絕對定位緣故的margin可以使用，默認情況下，auto會失效
通常情況下，relative與absolute想結合使用，祖先元素使用relative；子元素使用absolute，爲子元素定位，當使用relative時，top，left，right，bottom都無得情況下，位置不變，且不脫離文本流。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位的學習</title>
<style>
#d1{
width:400px;
height:400px;
background: red;
position:relative; /*爲祖先元素設爲相對定位，不設置top等，位置不發生變化*/
}
#d2{
width:200px;
height:200px;
background: yellow;
position:absolute;/*爲子元素設置絕對位置，其位置會相對祖先元素d1變化*/
right:0;
top: 0;
}
#d3{
width:100px;
height:100px;
background: green;
position: absolute;/*位置會相對祖先元素d2變化*/
right:0;
top:0;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
</body>
</html>
當子元素有倆個或多個時，子元素都會先根據其祖先元素的位置變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
background: red;
position:relative;
}
#d2{
width:100px;
height:100px;
background: yellow;
position: absolute;
top:3px;
left:3px;
}
#d3{
width:50px;
height:50px;
background: green;
position:absolute;
top:103px;
left:103px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
top、right、bottom、left的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left、right、top、bottom</title>
<style>
#d1{
width:200px;
height:200px;
background: red;
margin:0 auto;
margin-top:200px;
line-height: 200px;
text-align: center;
position: relative;
}
#d2{
width:100px;
height:100px;
position: absolute;
top:50px;
left:-90px;
background: green;
}
#d3{
width:100px;
height:100px;
position: absolute;
top:-80px;
left:50px;
background: blue;
}
#d4{
width:100px;
height:100px;
position: absolute;
top:50px;
right:-90px;
background: yellow;
}
#d5{
width:100px;
height:100px;
position: absolute;
bottom:-90px;
right:50px;
background: pink;
}
</style>
</head>
<body>
<div id="d1">
這是中間的div，祖先元素
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
</body>
</html>
z-index
屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注意：1.z-index
僅能在定位元素上奏效
2.元素可擁有負的 z-index 屬性值
3.默認的堆疊順序是後來者在上面
4.父子元素中，永遠都是子壓在父上，是不受z-index影響的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width:200px;
height: 200px;
background: red;
position: absolute;
left:3px;
top:3px;
z-index:2;
}
#d2{
width:200px;
height:200px;
background: yellow;
position:absolute;
left:50px;
top:50px;
z-index:1;
}
#d3{
width:200px;
height:200px;
background: blue;
position: absolute;
left:90px;
top:90px;
z-index:3;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
