携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情
1. 浮动和定位的应用场景
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
2. 定位的组成
定位=定位模式（用于指定一个元素在文档中的定位模式）+边偏移（决定该元素的最终位置）
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
2.1 静态定位
静态定位是元素的默认定位方式，无定位的意思。
语法:
2.2 相对定位（重点：相对于自己原来的位置而走）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。
语法:
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
2.3 绝对定位（重要：绝对定位不占位置，可以在盒子内自由移动（子绝父相））
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型)。
语法:
绝对定位的特点︰
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（参考官方文档)。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置。(脱标)
注意：子盒子是绝对定位的话，父盒子采用相对定位
2.4 固定定位（重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变
语法:
固定定位的特点∶(务必记住)
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
注意：固定定位也不占有原来的位置
固定到版心右侧：
小算法∶
- 让固定定位的盒子left: 50%.走到浏览器可视区（也可以看做版心)的一半位置。
- 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
版心指的是主内容区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
定位的总结：
