持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情
相对定位- relative
元素按照normal flow布局
可以通过left、right、top、 bottom进行定位
定位参照对象是元素自己原来的位置
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
相对定位的应用场景
在不影响其他元素位置的前提下，对当前元素位置进行微调
固定定位- fixed
1.了解fixed
元素脱离normal flow(脱离标准流、脱标)
可以通过left. right.top. bottom进行定位
定位参照对象是视口(viewport)
当画布滚动时，固定不动
2.画布和视口
视口(Viewport)
文档的可视区域
如下图红框所示
画布(Canvas)
用于渲染文档的区域
文档内容超出视口范围，可以通过滚动查看
如下图黑框所示
宽高对比
画布>=视口
绝对定位– absolute
元素脱离normal flow(脱离标准流、脱标)
可以通过left、right、top. bottom进行定位
定位参照对象是最邻近的定位祖先元素
如果找不到这样的祖先元素，参照对象是视口
定位元素(positioned element)
position值不为static的元素
也就是position值为relative、absolute、fixed的元素
子绝父相
在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是:
父元素设置position: relative (让父元素成为定位元素，而且父元素不脱离标准流)
子元素设置position: absolute
简称为“子绝父相”
position值对比
1.将position设置为absolute/fixed元素的特点(一)
可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局
2.将position设置为absolute/fixed元素的特点(二)
绝对定位元素(absolutely positioned element)
position值为absolute或者fixed的元素
对于绝对定位元素来说
定位参照对象的宽度= left + right + margin-left + margin-right +绝对定位元素的实际占用宽度
定位参照对象的高度= top + bottom + margin-top + margin-bottom +绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
left: 0、right: 0、top: 0、bottom: 0、margin:0
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
left: 0、 right: 0、top: 0、bottom: 0、margin: auto
另外，还得设置具体的宽高值(宽高小于定位参照对象的宽高)
