position常見的4個(gè)屬性值：static旨涝，relative蹬屹，absolute，fixed
1.static: 默認(rèn)位置
2.relative：如果設(shè)置了relative值白华，它偏移的top,right,bottom,left的值都是以它 原來的位置 為基準(zhǔn)偏移慨默，而不管其他元素會(huì)怎么樣。注意relative移動(dòng)后的元素在原來的位置 仍占據(jù)空間
relative示例圖
3.absolute：可定位于相對于包含它的元素的指定坐標(biāo)弧腥。意思就是如果他的父容器設(shè)置了position屬性厦取，并且position的屬性值為absolute,并且position的屬性值為absolute或relative，那么就會(huì)依據(jù)父容器進(jìn)行偏移管搪。
如果其父容器沒有設(shè)置position屬性虾攻，那么偏移是以body為依據(jù)。注意：設(shè)置absolute屬性的元素在標(biāo)準(zhǔn)流中不占位置更鲁。
absolute（父容器未設(shè)置寬高）
4.fixed：可定位于相對于瀏覽器的指定坐標(biāo)霎箍，無論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置澡为。它始終是以body為依據(jù)的漂坏。注意：設(shè)置fixed屬性的元素在標(biāo)準(zhǔn)流中不占位置。
fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
height: 2000px;
}
div {
border: 1px solid black;
}
.father {
/*position: relative;*/
}
.test {
/*position: relative;*/
/*position: absolute;*/
position: fixed;
/*left: 200px;
top: 100px;*/
}
</style>
</head>
<body>
<div class="">
上面
</div>
<div class="father">
<div class="test">
中間
</div>
</div>
<div class="">
下面
</div>
</body>
</html>
總結(jié)：
| position | 相對于 | 是否在標(biāo)準(zhǔn)流中占據(jù)位置 |
|---|---|---|
| static | 默認(rèn) | 是 |
| relative | 原來的位置 | 是 |
| absolute | 父容器 | 否 |
| fixed | 瀏覽器 | 否 |
