持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与
定位的基本介绍
为什么需要定位？
1、可以解决盒子与盒子之间的层叠问题
2、页面滚动，某个盒子固定在页面中不动
一个完整的网页需要：盒子模型+浮动+定位 一起来布局
定位的基本使用
静态定位介绍
静态定位是默认值，就是之前认识的标准流
任何一个标准流的盒子都有静态定位（静态定位就相当于没定位）
position:static;
相对定位介绍—不脱标自恋型
相对定位（不脱标）：自恋型 ，总是以自己原来的位置移动 ，原来的位子还在，其他盒子该在哪就在那，不会随着他的移动就动
position: relative;
top: 100px;
left: 100px;
注意点：
1、不脱标，相对于自己原来的位置移动，移动后自己原来的位置依然存在
2、加了相对定位的盒子通过 top left 移动距离 和 普通的盒子使用margin移动位置有什么区别？
- 普通的margin 移动距离会影响下面盒子，把其他盒子挤走
- 而相对定位的盒子通过top 移动，则不会影响其余的盒子。
应用在小范围的移动
绝对定位介绍—完全脱标拼爹型
绝对定位（完全脱标）：以最近一级带有定位的父级为准来移动距离，一般子绝父相。
/*1. 绝对定位 */
position: absolute;
/* 2. 偏移 */
top: 10px;
left: 10px;
注意点：
1、能盖住任何盒子，包括文字，图片，所以是完全脱标（浮动盖不住文字、图片）
2、不占位置
3、绝对定位和浮动的注意点：
- 如果盒子本身没有宽度， 加了浮动和绝对定位，则宽度改为内容的宽度。经常加 100%。
- 任何元素添加了浮动和绝对定位（固定定位），则不需要模式转换，就可以直接给宽度和高度。
固定定位介绍—完全脱标死心眼型
固定定位（完全脱标）：死心眼型，相对于浏览器进行移动
position: fixed;
bottom: 0;
right: 0;
width: 50px;
height: 200px;
注意点：
1、是以浏览器的可视区域来移动的
2、和绝对定位一样，是完全脱标的，不占位置
经常应用在让盒子固定在屏幕中的某个位置
粘性定位介绍 —不脱标
粘性定位（不脱标）：保留原有位置，并且根据情况固定在屏幕上
position：sticky;
注意点：
1、他是不脱标的，按照标准流来布局
2、当屏幕滚动到某一个位置后，就会固定在屏幕上
3、至少要指定一个偏移值才有效
top：0；就是距离浏览器0距离，显示效果就是当这个元素移动到浏览器顶部时就会粘着浏览器顶部
水平垂直居中案例
水平居中：
第一步：给子盒子绝对定位、给父盒子相对定位
第二步：先让子盒子往右移动父盒子的一半 left：50%
第三步：再让子盒子往左自动自己的一半 margin-left:父的子盒子宽度的一半
垂直居中：
第一步：给子盒子绝对定位、给父盒子相对定位
第二步：先让子盒子往下移动父盒子的一半 top：50%
第三步：再让子盒子往上移动自动自己的一半 margin-top:父的子盒子高度的一半
<div class="box">
<div class="s"></div>
</div>
.box {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
}
.s {
/* float: left; */
position: absolute;
/* 水平居中 */
/* 走父盒子宽度的一半 */
left: 50%;
/* 往左侧走自己（小盒子）宽度的一半 */
margin-left: -100px;
/* 垂直居中 */
/* 走父盒子高度的一半 */
top: 50%;
/* 往上侧走自己（小盒子）高度的一半 */
margin-top: -15px;
width: 200px;
height: 30px;
background-color: purple;
}
总结：一定要子绝父相
定位的盒子水平居中都需要两步：
- 让带有定位的盒子 水平居中 水平：
1、先走大盒子宽度的一半 2、然后往回走自己宽度的一半
- 让带有定位的盒子 垂直居中 垂直：
1、先走大盒子高度的一半 2、然后往回走自己高度的一半
圆角边框
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
border-radius：半径
可以是一个值、两个值、三个值、四个值
border-radius: 左上角 右上角 右下角 左下角； 顺时针
1、让正方形变成园的方法：宽度或者是高度的一半 或者直接border-radius:50%
.box {
width: 200px;
height: 200px;
/* 让正方形变为圆的算法： 宽或者高度的一半 */
/* border-radius: 100px; */
/* border-radius: 50%; */
}
2、让长方形变成胶囊形状的方法：必须是像素，宽度或者高度的一半，较小值的那个。
.box2 {
width: 300px;
height: 50px;
border: 1px solid purple;
/* border-radius: 50%; 不能这样写 */
border-radius: 25px;
}
.box3 {
width: 50px;
height: 300px;
border: 1px solid purple;
/* border-radius: 50%; 不能这样写 */
border-radius: 25px;
}
元素层级问题
不同的布局方式有不同的层级关系
- 标准流<浮动<定位
不动定位之间的层级关系:
- 相对、决定、固定默认的层级是相同的
- 此时html中写在下面的元素层级会更高，就会覆盖上面的元素
更改定位元素的层级
z-index:数字; 没有单位 数字越大层级越高
注意点：
- 数字越大，层级约靠上。
- 只有定位的元素才有这个属性。
- 数字后面不跟单位。 font-weight: 400;也不带单位
- 数字是整数。 可以是 负数 可以是 0 可以是正数 比如 1.2.3.4
- 默认值是 auto 。 就是跟父级一样大。
