1.绝对定位(position: absolute)
- 以父元素的左上角原点为定位基准点，absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。简单来说就是绝对定位是脱离标准流的。
- 需要配合方位属性实现移动，默认相对于父元素进行移动位置。
- 须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
2.相对定位(position:relative)
- 在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。简单来说就是相对定位不会脱离标准流。
- 相对定位是相对其初始位置进行偏移定位的，当设定position: relative 则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。
3.子绝父相
问题1:子绝父相的含义是什么？
- 子元素：绝对定位
- 父元素：相对定位
问题2:子绝父相的应用场景是什么？
- 让子元素相对于父元素进行自由移动
问题3:子绝父相有什么好处?
-
父元素是相对定位，则对网页布局影响最小.
-
父级使用相对定位：
- 不脱标，在标准流中占据空间
- 绝对定位的儿子们都参考父亲进行定位
-
子级使用绝对定位：
- 脱标，不影响其他元素的摆放
- 自己则相对父级任意摆放位置
具现使用场景:
- 网页中右上角HOT图标便是以子绝父相定位在盒子右上角,让其效果具现,且对页面影响最小
- 实际工作中PDD等电商站主页不难发现都存在其身影
