定位的使用：
- 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.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）
使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告
定位总结
网友评论