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 | 瀏覽器 | 否 |