DIV中position的5個屬性值
阿新 • • 發佈：2018-12-31
position有5種屬性值：static, relative, absolute, fixed, inherit
一、預設定位static：
position的預設值，一般不設定position屬性時，會按照正常的文件流進行排列。
二、相對定位relative：
1、relative 就是相對元素static定位時的位置進行偏移，如果不指定top，right，bottom，left的值，其位置是沒有變化的。
2、即使進行了偏移，其佔據的位置是不變的。（就是所說的不脫離文件流）
看栗子：
<!DOCTYPE html>
<html lang="en"> box1那個紅點是我截圖時自己加上去的，box2就是根據那個點的位置來偏移。可以看到box2到了下一行，但box3並沒有緊跟在box1下面，這是因為box2仍然佔據著那個位置。
三、固定定位absolute：
- 固定定位是相對離它最近帶有定位（relative，absolute，fixed）的父元素（或祖先元素 ）而偏移的，如果沒有則是相對於整個文件
- 脫離文件流
- 使內聯元素支援寬高
下面舉個例子，證明第一點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position理解</title>
<style>
div{
width: 100px;
height: 100px;
}
.wrap{
width: 100px;
height: 200px;
margin: 20px auto;
}
.box1{
position: relative;
background: #10a6ce;
}
.box2{
position: absolute;
left: 100px;
top: 70px;
background: #c93300;
}
.box3{
background: #ffcccc;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">box1<div class="box2">box2</div></div>
<div class="box3">box3</div>
</div>
</body>
</html>
去掉box1中的position，結果變為
四、固定定位fixed：
fixed是特殊的absolute，即fixed總是以body為定位物件的，按照瀏覽器的視窗進行定位。
五、繼承定位inherit ：
inherit呢， 就是從父元素繼承 position 屬性的值。