1.定位
概念:将一个元素放在指定的位置上
语法:
position:定位方式;
坐标:
left:*px | right:*px;
top:*px | bottom:*px;
定位方式
1. static 静态定位:元素的默认定位方式。
2. fixed 固定定位:基于浏览器窗口进行位置移动
position:fixed;
left:*px | right:*px;
top:*px | bottom:*px;
盒子完全居中未知大小的盒子
方式1:
position:fixed;
top:50%;
margin-top:-盒子高度的一半;
left:50%;
margin-left: -盒子宽度的一半;
方式2:
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
3. relative 相对定位:基于元素原来的位置进行移动
4. absolute 绝对定位:基于被设置非静态定位的最近上级元素进行定位。如果都没有,基于浏览器的第一屏进行定位。
5. sticky 粘性定位
定位的五种方式
最新推荐文章于 2023-03-22 17:29:05 发布