粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位 占有原先的位置 (相对定位特点)
- 必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差,IE 不支持。
1.9 定位的总结
定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否(占有位置) 相对自身位置移动 常用
absolute绝对定位 是(不占有位置) 带有定位的父级 常用
fixed固定定位 是(不占有位置) 浏览器可视区 常用
sticky粘性定位 否(占有位置) 浏览器可视区 很少用 - 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置
- 学习定位重点学会子绝父相。
1.10 定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
语法: