一.定位
使用定位步骤：
1.设置定位方式， 属性名：position
2.设置偏移值， ➢偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
➢ 选取的原则一般是就近原则 （离哪边近用哪个）
1.静态定位: position: static 就是之前认识的标准流
2.相对定位：posiiton:relative
2.1）自恋型定位，相对于自己之前的位置进行移动
2.2）需要配合方位属性实现移动
2.3) 在页面中占位置 → 没有脱标
3.绝对定位：position:absolute;
1. 需要配合方位属性实现移动 2. 默认相对于浏览器可视区域进行移动 3. 在页面中不占位置 → 已经脱标
3.1绝对定位相对于谁移动？
1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
应用场景：子绝父相
！案例重点：使用子绝父相使盒子水平居中
做法：1.子绝父相 2..先让子盒子往右移动父盒子的一半 left:50%
3.再让子盒子往左移动自己的一半，普通做法：margin-left：子盒子宽度的一半（前面加负号）
缺点：子盒子宽度变化后需要重新改代码
• 优化做法：transform：translate(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
ps:让盒子水平垂直都居中的方法
<style>
.box1 {
position: relative;
width: 500px;
height: 300px;
background-color: pink;
}
.box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
background-color: green;
}
</style>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>4.固定定位 position:fixed
让盒子固定定在屏幕中的某个位置
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
