定位的使用场景:
1.将盒子定位到屏幕的某一位置
2.解决盒子之间的层叠问题(类似于搭积木的形式,将一个盒子压在另外一个盒子的上面)
定位模式
定位模式决定元素的定位方式,通常通过CSS的 position 属性来设置:
选择器{ position:定位类型}
定位模式分为四类:
- 静态定位 static
- 相对定位 relative
- 绝对定位 absolute
- 固定定位 fixed
偏移值
偏移值分为两个方向,水平方向和垂直方向 选取的原则一般就是就近原则
水平方向: left /right , 数值+px , 距离左/右边的距离
垂直方向: top /bottom , 数值+px ,距离上/下边的距离
静态定位static
静态定位:默认定位方式,无定位的意思,相当于标准流
语法:选择器{position:static;}
特点:
1.静态定位是之前的标准流,按照标准流的特性来摆放位置,不能通过位移进行移动
2.静态定位在布局时很少用到
相对定位relative
相对定位:元素根据自身原来位置进行移动
语法:选择器{position:relative;}
特点:
1.在原来标准流的位置继续占有位置,不脱标 ,对后面的盒子仍然以标准流方式对待
2.需要配合方位属性进行移动
绝对定位absolute
绝对定位:
祖先元素没有定位,默认相对于浏览器进行移动
祖先元素有定位,相对于最近且有定位的祖先元素来进行定位移动
语法:选择器{position:absolute;}
特点:
- 绝对定位不占有原先位置,脱标
- 没有祖先元素则以浏览器可视窗口进行移动,有祖先元素则以最近一级有定位的祖先元素进行移动
- 需要配合方位属性进行移动
拓展-子绝父相:
父元素:相对定位 ,子元素:绝对定位
使用场景:想要子元素根据自己最近的一级父亲进行移动,而不是浏览器可视窗口进行移动,这时候可用子绝父相来使用
特点:
- 子级元素绝对定位,不占有位置,可以放在父盒子里面的任何一个地方,不会影响到其他兄弟盒子
- 父级元素需要添加相对定位,占取位置,来限制子盒子在父元素内部进行显示移动
- 在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可
固定定位fixed
固定定位:让盒子固定在屏幕中的某个位置,相对于浏览器可视区进行移动,脱离标准流,不占有位置 语法:选择器{position:fixed;}
特点:
- 将盒子任意固定在盒子屏幕的某个位置,其他元素移动,它不动
- 相对于浏览器器进行运动,在网页不占位置,脱标
- 需要配合方位属性进行移动
拓展-改变定位元素层级
z-index
数值越大层级越高
