将盒子定在某一位置，摆盒子，按照定位的方式移动盒子。
定位 = 定位模式(指定一个元素在文档中的定位方式) + 边偏移(决定该元素的最终位置)
position属性 （定位模式）
静态定位static
（了解）默认定位方式 无定位，没有边偏移
相对定位relative
（重要）以原位置的坐标为准 根据 边偏移 的量移动，后面的其他盒子仍以标准流固定在那里不脱标 例：
<style>
.box1 {
width: 200px;
height: 200px;
background-color: gray;
}
.box2 {
position: relative;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: black;
}
.box3 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="box1">1</div>
<div class="box2" style="color: #fff">2</div>
<div class="box3">3</div>
↑ 盒子box2是相对定位，给了偏移量，它仍然占有原来空间，下面的标准流box3不会受影响。
绝对定位absolute
（重要）元素移动位置是相对于最近一个嵌套它的祖先元素来，没有父级元素，或者 父元素是浮动的 或者 没有给定位的（没position：xxx(除了static) ），则以浏览器四周为准。
偏移之后会脱标，比浮动还高，下面的标准流会被影响
固定定位fixed
(重要) 固定于浏览器的 可视窗口 ，可以在滚动浏览器页面时固定位置不变。
可以left:50%;margin-left: 版心宽度一半距离+ ，这样就能让盒子固定悬在版心右边显示；悬在左边也同理 right:50%和margin-right: 版心宽度一半距离+ ，
这样缩放浏览器页面时盒子会跟着版心又能在滚动界面时固定于可视窗口的固定位置
例：
<style>
.fixed{
position: fixed;
top: 50px;
right: 50%;
margin-right: 605px;
width: 100px;
height: 100px;
background-color: orange;
}
.banner{
width: 1200px;
height: 600px;
background-color: pink;
margin: 50px auto;
}
</style>
<div class="fixed">5</div>
<div class="banner">6</div>
粘性定位sticky
它是相对定位和固定定位的混合，因为它既 占有原先位置 又 可以悬于可视窗口区域。
必须添加top、left、right、bottom的其中一个才有效
缺点：兼容性差 IE不支持,一般用js实现
例：
<style>
body{
height: 5000px;
}
.sticky{
position: sticky;
top: 5px;
width: 200px;
height: 500px;
background-color: darkblue;
margin-top: 100px;
}
</style>
<body>
<div class="sticky"></div>
</body>
边偏移
top ：xxpx | bottom： xxpx | left：xxpx | right： xxpx
如果同时有left和right，则left有效；如果同时又top和bottom，则bottom有效。
子绝父相
父元素 position: relative 子元素position: absolute
只要子元素用了绝对定位，它默认是相对于整个浏览器窗口的四周围来定义边偏移，只有父元素设置了相对定位，子元素设置的边偏移才会以父元素的四周为参考。
定位的叠放顺序
可以用z-index来决定，如果没给，多个有position的盒子，后面写的在最上面（后来居上）， 定义了z-index数值越大的越靠上，默认auto，负数在下面，数值都不加单位，
只有定位盒子才能用z-index属性
定位的特殊特性
块元素添加了定位positon的绝对定位absolute 或 固定定位fixed 后不设置宽高的话，宽高是由内容撑开的（相对定位relative则不会，宽度占一行）
行内元素加了定位position的绝对定位absolute 或 固定定位fixed 后可以设置宽高。
例：
<style>
.test {
position: absolute;
background-color: pink;
}
span {
position: absolute;
top: 100px;
background-color: skyblue;
width: 100px;
height: 100px;
}
</style>
<div class="test">9</div>
<span>10</span>
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| 静态定位static | 否 | 不能使用边偏移 | 否 |
| 相对定位relative | 否 | 相对于自身原位置移动 | 是 |
| 绝对定位absolute | 是 | 带有定位的父级或相对于浏览器 | 是 |
| 固定定位fixed | 是 | 浏览器可视区 | 是 |
| 粘性定位sticky | 否 | 浏览器可视区 | 否 |
浮动不会压住下面标准流的文字，但是绝对定位absolute 和 固定定位fixed会。 因为浮动最开始是为了实现文字环绕效果而出现的，现在多用于布局。
浮动、定位、标准流 的联系案例：
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
position: relative;
width: 50px;
height: 50px;
top: 10px;
left: 10px;
background-color: skyblue;
}
.box3 {
width: 500px;
height: 500px;
background-color: gray;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
效果：
