Position属性四个值：static、fixed、absolute和relative的。。
。
Position的属性值有：
1.    Absolute：绝对定位，是相对于最近的且不是static定位的⽗元素来定位
2.    Fixed：绝对定位，是相对于浏览器窗⼝来定位的，是固定的，不会跟屏幕⼀起滚动。
3.    Relative：相对定位，是相对于其原本的位置来定位的。
4.    Static：默认值，没有定位。
5.    Inherit：继承⽗元素的position值。
对于初学者来说，position的属性很让⼈头疼，特别是absolute与relative之间的区别，接下来我就以图⽂讲解的⽅式来给⼤家讲解⼀下这两者之间的不同之处。
⾸先设置4个div：
<body>
<div class="div1">第⼀个div</div>
<div class="div2">第⼆个div</div>
<div class="div3">第三个div</div>
<div class="div4">第四个div</div>
</body>
添加背景⾊，效果如下：
给第⼆个div设置absolute:
.div2{
height:100px;
absolute relative
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
效果如图：
第⼆个div设置了absolute，则该div的宽度就由⽂本决定，且下⾯的div会上移占据之前第⼆个div的位置，top和left是相对于离它最近且不是static定位的⽗元素来定位的，在此div2因为没有⽗元素，所以第⼆个div相对于根元素即html元素来定位。
将第⼆个div设置为relative：
.div2{
height:100px;
background-color: blueviolet;
position:relative;
left:50px;
top:50px;
}
效果如图：
设置relative的div不会影响其他div的位置，且top和left是相对于它原本⾃⾝的位置来定位。
给第⼆个div添加⼀个⽗div：
<body>
<div class="div1">第⼀个div</div>
<div class="container1">
第⼆个div的⽗div
<div class="div2">第⼆个div</div>
</div>
<div class="div3">第三个div</div>
<div class="div4">第四个div</div>
</body>
.container1{
position:absolute;
height:200px;
background-color: greenyellow;
}
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
效果如图：
div2的⽗div设置为absolute，下⾯的div3,div4会上移，div2也设置为absolute，div2就会相对于⽗div来定位。若将div2即第⼆个div的absolute改为relative：
.div2{
height:100px;
background-color: blueviolet;
position:relative;
top:50px;
left:50px;
}
则效果图如下：
注意，上⾯两个图的第⼆个div与⽗div的上边距是不同的，第⼀个是相对⽗div来定位，第⼆个是相对原来本⾝的位置来定位。可能此时你会注意到两个图的第⼆个div的宽度不同，在没有给div设置宽度的情况下，第⼀个是设为absolute，所以宽度为⽂本宽度，第⼆个是relative，所以宽度与⽗元素宽度相同。
若保持上⾯的两种情况，都将第⼆个div的宽度设为500px，得到效果如下：
由上图可以知道，absolute定位的⼦元素宽度不会影响⽗元素的宽，⽽relative定位的⼦元素会撑⼤⽗元素。
总结：
Absolution：元素会脱离⽂档流，定位是相对于离它最近的且不是static定位的⽗元素⽽⾔，若该元素没有设置宽度，则宽度由元素⾥⾯的内容决定，且宽度不会影响⽗元素，定位为absolution后，原来的位置相当于是空的，下⾯的的元素会来占据。
Relative：元素仍处于⽂档流中，定位是相对于原本⾃⾝的位置，若没有设置宽度，则宽度为⽗元素的宽度，该元素的⼤⼩会影响⽗元素的⼤⼩。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。