前端CSS-相对定位，绝对定位，固定定位
前端CSS - 相对定位，绝对定位，固定定位
1.1 相对定位 position:relative
相对定位，就是微调元素位置的.让元素相对⾃⼰原来的位置，进⾏位置的微调.
也就是说，如果⼀个盒⼦想进⾏位置调整，那么就要使⽤相对定位了
position:relative;  →必须先声明，⾃⼰要相对定位了，
left:100px;      →然后进⾏调整。
top:150px;      →然后进⾏调整。
1.2 相对定位的特性 - 不脱标,⽼家留坑，形影分离
相对定位不脱标，真实位置是在⽼家，只不过影⼦出去了，可以到处飘.
1.3 相对定位的⽤途
相对定位有坑，所以⼀般不⽤于做"压盖"效果.页⾯中，效果极⼩.就两个作⽤:
微调元素
做绝对定位的参考,⼦绝⽗相(绝对定位中详细讲)
1.4 相对定位的定位值
可以⽤left,right来描述盒⼦右，左的移动
可以⽤top,bottom来描述盒⼦的下，上的移动.
position: relative;
right: 100px;  →往左边移动
top: 100px;
position: relative;
right: 100px;
bottom: 100px;    →移动⽅向是向上。
2.1 绝对定位
绝对定位脱标
绝对定位的盒⼦，还脱离标准⽂档流的.所以，所有的标准⽂档流的性质，绝对定位之后都不遵守了.
绝对定位之后，标签就不区分所谓的⾏内元素，块级元素了，不需要display:block；就可以设置宽⾼了
span{
position: absolute;
top: 100px;css布局左边固定右边自适应
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
2.2 参考点
绝对定位的参考点，如果⽤top描述，那么定位参考点就是页⾯的左下⾓,⽽不是浏览器的左上⾓:
如果⽤bottom描述，那么就是浏览器⾸屏窗⼝尺⼨，对应的页⾯的左下⾓:
⾯试题:
答案:⽤bottom的定位的时候，参考的事浏览器⾸屏⼤⼩对应的页⾯左下⾓.
2.3 以盒⼦为参考点 - ⼦绝⽗相
⼀个绝对定位的元素，如果⽗辈元素中出现了也定位了的元素，那么将以⽗辈这个元素，为参考点.
⼦绝⽗绝,⼦绝⽗相,⼦绝⽗固，都是可以给⼉⼦定位的.但是,⼯程上,⼦绝,⽗绝，没有⼀个盒⼦在标准⽂档流中，所以页⾯就不稳固，没有任何实战⽤途.⼯程上,"⼦绝⽗相"有意义,⽗亲没有脱标,⼉⼦脱标在⽗亲的范围⾥⾯移动.
<div class=”box1”>  →绝对定位
<div class=”box2”>  →相对定位
<div class=”box3”>  →没有定位
<p></p>  →绝对定位，以box2为参考定位。
</div>
</div>
</div>
绝对定位的⼉⼦,⽆视参考的那个盒⼦的padding.下图中，绿⾊部分是div的padding，蓝⾊部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将⽆视⽗亲的padding，在border内侧为参考点，进⾏定位：
2.4 绝对定位的盒⼦居中
绝对定位之后，所有标准流的规则，都不适⽤了.所以margin:0 auto；失效.
width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;  →宽度的⼀半
⾮常简单，当做公式记⼀下来.就是left:50%;margin-left：负的宽度的⼀半.
3. 固定定位 IE6不兼容
固定定位，就是相对浏览器窗⼝定位.页⾯如何滚动，这个盒⼦显⽰的位置不变.
固定定位脱标!

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