CSS 定位
定位的使用:
- 4种定位方式:静态、相对、绝对、固定
- 4种边偏移属性:left、right、top、bottom
注意:偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 (向下走)
1.静态定位
所有标准流都是静态定位
语法:position:static
总结:
1.工作中用的比较少,因为加了静态定位,元素也是标准流
2.偏移值对静态定位无效
使用场景:通常是将已经设置过定位的元素还原成标准流
2.相对定位
相对于自身在标准流的位置进行定位移动
语法:position:relative
总结:
1.相对定位参考自身在标准流中的位置进行偏移,移动的出发点是自身标准流的位置
2.不会对标准流的元素造成影响,没有脱离文档流,移动之后,自身在标准流中还占有空间,真正占得位置还是标准流的位置(灵魂不在 肉体永驻)
3.可以盖在标准流的上方
使用场景:微调元素和配合绝对定位来实现效果
3.绝对定位
从父元素一直往上找设置过定位的直系父元素,作为自己的偏移参照物,找不到就继续往上找,直到html停止
语法:position:absolute
总结:
1.偏移位置参考设置过定位(相对/绝对/固定)的直系父元素或直系祖宗元素,没找到就一直往上级找,直到html
2.会脱离标准流,不再继承父级的宽度(不论是块元素还是行元素,盒子的大小取决于其中内容),可以定义宽高,不占据标准流的空间
3.margin:auto对于设置过绝对定位的元素不起作用
4.设置方向偏移的时候,横向或者纵向只设置一个即可,设置多个没有意义
使用场景:配合相对定位使用(一般都会配合相对定位,但不是绝对的都是相对定位)
4.固定定位
以浏览器作为参考进行偏移,且滚动条对固定定位无效
语法:position:fixed
总结:
1.会脱离文档流,不占据标准流的空间
2.不继承父元素的宽高,需要给自身定义宽高
3.margin:auto对固定定位的元素不起作用
4.不会随着滚动条滚动,永远固定在浏览器窗口中的位置(移动的出发点:浏览器窗口,滚动条对设置了固定定位的元素无效)
使用场景:常用于网页右下角的“回到顶部”,或网站左右两侧的广告