1. Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
2. Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。 3. Relative：相对定位，是相对于其原本的位置来定位的。 4. Static：默认值，没有定位。 5. Inherit：继承父元素的position值。
初始设置四个div
<body> <div class="sun1">sun1</div> <div class="sun2">sun22222</div> <div class="sun3">sun3</div> <div class="sun4">sun4</div> </body>复制代码
1. 子元素absolute
.sun2{
position: absolute;
height: 100px;
left: 50px;
top: 50px;
background-color:cadetblue
}第二个元素设置absolute, 脱离文档流，
宽度由文字sun2222撑开，top跟left根元素即html元素来定位
2.子元素relative
.sun2{
position: relative;
height: 100px;
left: 50px;
top: 50px;
background-color:cadetblue
}复制代码设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位, 宽度还是
原来父级的宽度
3.子元素设置一个父级absolute, 子元素absolute
.sun{
position:absolute;
height: 200px;
background-color: coral;
}
.sun2{
position: absolute;
height: 100px;
left: 50px;
top: 50px;
background-color:cadetblue
}
<div class="sun1">sun1</div>
<div class="sun">
这里是sun22222的父元素
<div class="sun2">sun22222</div>
</div>
<div class="sun3">sun3</div>
<div class="sun4">sun4</div>复制代码sun2就会相对于父sun的div来定位。子元素sun 宽度由文字sun22222内容撑开决定
子元素sun2222 设置一个500px，宽度不会把父元素撑开
4.子元素设置一个父级absolute, 子元素relative
.sun{
position:absolute;
height: 200px;
background-color: coral;
}
.sun2{
position: absolute;
height: 100px;
left: 50px;
top: 50px;
background-color:cadetblue
}
.sun{
position:absolute;
height: 200px;
background-color: coral;
}
.sun2{
position: relative;
height: 100px;
left: 50px;
top: 50px;
background-color:cadetblue
}复制代码sun2就会相对于父sun的div来定位。子元素sun2222 宽度与父元素相同
子元素sun2222 设置一个500px，宽度会把父元素撑开
5.子元素设置一个父级relative, 子元素absolute（常用）
.sun{
position: relative;
height: 200px;
background-color: coral;
}
.sun2{
position: absolute;
height: 100px;
width: 500px;
left: 50px;
top: 50px;
background-color:cadetblue
}复制代码子元素定位相对于父元素
子元素定位相对于父元素，子元素设置宽度不会影响父元素
总结：
absolute: 会脱离文档流 ，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则
宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。relative: 不会脱离文档流，定位是相对于原本自身的位置，若没有宽度，那么宽度为父元素宽度，该元素的宽度会影响父元素的的大小