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">
<head>
<meta charset="UTF-8">
<title>position理解</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
background: #10a6ce;
}
.box2{
position: relative;
left: 100 px;
top: 100px;
background: #c93300;
}
.box3{
background: #e5eecc;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
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 屬性的值。