1.4种定位方式:静态、相对、绝对、固定
2.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.设置方向偏移的时候,横向或者纵向只设置一个即可,设置多个没有意义 使用场景:配合相对定位使用(一般都会配合相对定位,但不是绝对的都是相对定位) |