<1..定位类型>
1.position:static; 默认值,静态定位
2.position:relative; 相对定位
3.position:absolute; 绝对定位
4.position:fixed; 固定定位
5.position:sticky; 粘性定位
(1)position:relative; 相对定位
1. 参考物: 元素本身的位置
2. 移动方向: top/right/bottom/left
3. 移动距离: 数值px
注意点:
1. 加了定位属性才可以用这几个方向去移动
2. 移动之后依然占据原来的位置(不会脱离文档流的)
3. 移动的时候优先考虑盒模型属性,一般相对定位不会独立使用,会和绝对定位结合使用
(2)绝对定位 position:absolute;
1. 参考物: 有定位属性(带有position属性)的祖先元素
绝对定位的元素会一层一层向上找带有定位属性的祖先元素,先找到谁就参考谁
绝对定位的元素会一层一层向上找带有定位属性的祖先元素,如果找到body后~还没有找到,就参考浏览器的第一屏窗口(初始包含块):没有滚动之前的区域
2. 移动方向: left/right/bottom/top
3. 移动距离: 数值px/数值%
特点
1. 绝对定位的元素,宽度/高度/方向里面设置百分数,参考的是参考物
2. 宽度不设置且加了绝对定位,宽度由内容决定
3. 会脱离文档流,遮挡住后面的元素和文字
4. 脱离文档流(float/absolute)的元素都会导致margin:auto失效
5. 绝对定位会让内联元素变成块
(3)固定定位 position:fixed;
参考物: 浏览器可视窗口
特点:
1. 不会跟随滚动条滚动
2. 脱离文档流,遮挡住后面的元素和文字
(4)粘性定位 position:sticky;
参考物: 浏览器可视窗口
移动方向: top
移动距离:数值px
特点:
没达到top值之前,元素是正常显示,类似于相对定位,达到top值之后,类似于固定定位,不跟随滚动条滚动,且脱离文档流,一般设置top:0;吸附在浏览器顶部,叫吸顶效果
定位属性的层级关系
1. 定位元素的层级要比普通元素层级要高
2. 如果都加了定位属性的话,靠近下面的结构层级要高
3. z-index:0/数值;
- 值越大,层级越高,越在上面显示
- 可以为负数
- 必须结合定位属性