1.position屬性的意義：
position屬性決定了元素將如何定位
通過top、right、bottom、left實現位置的改變。
2.position屬性的可選參數：
·static: position屬性中的默認值，元素按照標準流的方式進行正常排列。
·relative:生成相對定位的元素，相對於其正常位置（即正常文檔流時候的位置）進行定位。
相對定位，仍然處於標準流中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.test{
width: 100px;
height: 100px;
background: red;
position: relative;
right: 50px; /*向左移動了50px，向上移動了50px,和元素的原始右側位置相對距離50px。*/
bottom: 50px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>使得塊級元素有了層的概念，後寫元素會覆蓋先寫元素。
·absolute:生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素將會脫離正常的文檔流。也有層級概念，後寫元素覆蓋先寫元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
*{
margin: 0; /*預先寫公共樣式，把所有帶有邊距的元素清除掉。*/
padding: 0; /*這兩句清楚了所有元素的邊距了 ‘*’表示全部操作。 */
}
.test{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50px; /*相對父級元素body左側間隔50px，*/
bottom: -50px;/*相對父級元素body下側間隔-50，即把頁面向下拉長了50px，如果position屬性是fixed就不會拉長*/
/*使得class=test的div脫離了文檔流，所以html不存在div了，如果只存在這一個div，html的高度爲0*/
}
.bro{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="bro"></div>
<div class="test"></div>
</body>
</html>·fixed:生成絕對定位的元素，相對於瀏覽器窗口進行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
*{
margin: 0; /*預先寫公共樣式，把所有帶有邊距的元素清除掉。*/
padding: 0; /*這兩句清楚了所有元素的邊距了 ‘*’表示全部操作。 */
}
.test{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50px;
bottom: -50px;
/*使得div脫離了文檔流，所以html不存在div了，高度變爲0*/
}
.bro{
width: 100px;
height: 100px;
background: blue;
}
.per{ /*一開始和紅色區塊重合，但是滾輪移動使得瀏覽器拖到最底，依舊是隻顯示矩形的一半，所以是相對於瀏覽器顯示窗口的位置來說的，永遠處於底部並相對底部向下位移50px*/
width: 100px;
height: 100px;
background: black;
position: fixed;
left: 50px;
bottom: -50px;
}
/*body{
height: 3000px;
}*/
</style>
</head>
<body>
<div class="bro"></div>
<div class="test"></div>
<div class="per"></div>
</body>
</html>·inherit:規定應該從父元素繼承 position 屬性的值。