定位(场景:解决盒子与盒子之间的层叠问题(定位之后元素层级最高);可以让盒子始终固定在屏幕中)
使用步骤:1.设置定位方式
属性名:position
常见属性值:
静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)
2.设置偏移值(水平:left、right;垂直:top、bottom)
偏移值设置分别为两个方向,水平和垂直方向各选一个使用即可
选取的原则一般是就近原则(离哪边近用哪个)
相对定位(介绍:自恋型定位,相对于自己之前的位置进行移动) position:relative
特点:1.需要配合方位属性实现移动;
2.相对于自己原来位置进行移动;
3.在页面中占位置→没有脱标;
应用场景:1.配合绝对定位组CP(子绝父相);2.用于小范围的移动;
绝对定位(介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动) position:absolute
特点:1.需要配合方位属性实现移动;
2.默认相对于浏览器可视区域进行移动;
3.在页面中不占位置→已经脱标;
应用场景:配合绝对定位组CP(子绝父相)
绝对定位相对于谁移动?
- 祖先元素中没有定位→默认相对于浏览器进行移动;
- 祖先元素中有定位→相对于 最近的 有定位 的祖先元素进行移动;
子绝父相水平居中案例-解决方法
- 子绝父相 2. 先让子盒子往右移动 父盒子的一半(left:50%)
3.再让子盒子往左移动自己的一半(普通做法:margin-left:负的子盒子宽度的一半)
缺点:子盒子宽度变化后需要重新改代码
优化做法:transform:translateX(-50%)
子绝父相水平垂直居中操作: 1.子绝父相 ;
2.left:50%;
3.top:50%;
4.transform:translate(-50%,-50%);
固定定位(介绍:死心眼型定位,相对于浏览器进行定位移动) position:fixed;
特点:1.需要配合方位属性实现移动;2.相对于浏览器可视区进行移动;3.在页面中不占位置→已经脱流;
应用场景:让盒子固定在屏幕中的某个位置;
元素层级问题
不同布局方式元素的层级关系: 标准流<浮动<定位
不同定位之间的层级关系:
相对、绝对、固定默认层级相同;此时HTML中写在下面的元素层级更高,会覆盖上面的元素;
更改定位元素的层级(场景:改变定位元素的层级)
属性名:z-index 属性值:数字(数字越大,层级越高)