- 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的完美结合，特造出吸附效果
特点：
- 如果产生偏移，原位置还是会在常规流中
- 如果它的最近祖先元素有滚动，那么它的偏移标尺就是最近祖先元素
- 如果最近祖先元素没有滚动，那么它的偏移标尺是视口
- 上下左右的偏移规则
posted @
2020-05-18 21:04
a_哆肉
阅读(
153)
评论()
编辑
收藏
举报
