- static静态定位/常规定位/自然定位
作用:使元素定位于常规/自然流中
特点:- 忽略top、bottom、left、right或者z-index声明
- 两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的
- 具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大沾满剩余宽度,造成的效果就是这个块水平居中
- relative相对定位
作用:是元素成为containing-block,就是可定位的祖先元素
特点:- 可以使用top、bottom、left、right、z-index进行相对定位
- 相对定位的元素不会离开常规流
- 任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位
- 可以是浮动元素发生偏移,并控制它们的堆叠顺序
- absolute绝对定位
作用:使元素脱离常规流
特点:- 脱离常规流
- 设置尺寸要注意:百分比比的是谁——最近定位祖先元素
- top、bottom、left、right如果设置为0,它将对齐到最近定位祖先元素的各边——衍生出一个居中妙计
- top、bottom、left、right如果设置为auto它将被打回原形
- 如果没有最近定位祖先元素会认为<body>做父级元素
- z-index可以控制堆叠顺序
- fixed固定定位
作用:使元素脱离常规流
特点:- 固定定位元素不会随着视口滚动而滚动
- 继承absolute特点
- sticky磁贴定位/粘性定位/吸附定位
作用:relative+fixed的完美结合,特造出吸附效果
特点:- 如果产生偏移,原位置还是会在常规流中
- 如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近祖先元素
- 如果最近祖先元素没有滚动,那么它的偏移标尺是视口
- 上下左右的偏移规则