Position的属性值有:
1.Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位
2.Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。
3.Relative:相对定位,是相对于其原本的位置来定位的。
4.Static:默认值,没有定位。
5.Inherit:继承父元素的position值。
Absolution:若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为absolution后,脱离文档流,因此不会占据文档流上的位置。
Relative:若没有设置宽度,则宽度为父元素的宽度,该元素的大小会影响父元素的大小。(自己代码测试的时候发现子relative没有将父relative撑开,发现问题是因为父元素是div,块级元素默认占满其父元素的宽度,所以父relative本身就是100%,只有给父relative设置display:inline-block,才能观察到是否被撑开)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative_absolute</title>
<style>
*{
margin: 0;
padding: 0;
}
.all{
padding-left: 200px;
padding-right: 300px;
}
.div1{
background-color: #e4b9b9;
height: 100px;
}
.div2{
background-color: #a3d48e;
position: relative;
left: 50px; /*20向右偏移,-20向左偏移*/
top: 10px;
height: 100px;
width: 100%;
}
.div3{
background-color: #fe626d;
height: 100px;
opacity: 0.6;
}
.div4_Container{
position: relative;
height: auto;
width: auto;
border: 2px solid #0b51b4;
}
.div4{
position: absolute;
left: 10px;
top: 10px;
width: 100%; /*绝对定位的元素宽度100%是 最近的且不是static定位的父元素 的宽度*/ /*绝对定位的子元素设定过大时,父元素不会被撑开*/
background-color: #00BCD4;
height: 100px;
opacity: 0.6;
}
.div5_Container{
display: inline-block;/*不加这句话他的宽度是满的,也无法测试div5能不能撑开宽高。因为一个div默认占一行宽度*/
position: relative;
left: 100px;
min-width: 20px;
border: 2px solid black;
}
.div5{
position: relative;
top: 0px;
width: 1000px; /*绝对定位的元素宽度100%是 最近的且不是static定位的父元素 的宽度*/ /*绝对定位的子元素设定过大时,父元素不会被撑开*/
background-color: #3DB271;
height: 300px;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="all">
<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>
<div class="div4_Container">
第四个div包裹器
<div class="div4">第四个div(参照元素(最近的且不是static定位的父元素)的宽度)</div>
</div>
<div class="div5_Container">
第五个div包裹器(可以看出第四个div不在文档流上,没有占用高度)
<div class="div5">第五个div(top:0位置是排列在父元素字体内容下的,而不是与父元素同样起始点)
而且可以看到 第五个div 撑开了父元素-第五个div包裹器 </div>
</div>
</div>
</body>
</html>