CSS定位的学习
为什么要学习定位？
在学习之前，我们要思考一下，定位出现的意义是什么，有什么用呢？
我们学习定位之前学习了浮动，但是我们会发现许多效果难以实现，比如说京东首页的轮播图的左右箭头：
然后往下拖，发现顶部和右侧的定位栏会固定在屏幕上：
看完这些相比对定位的存在的原因有了一定的了解了吧。
什么是定位呢？
定位，可以让一个盒子在另一个盒子的内部*移动，想定到什么位置就定到什么位置。
定位 = 定位模式 + 边偏移
定位模式：决定盒子的定位方式，通过position属性来设置，可以分为四个值：
position: static(静态定位)
position: relative(相对定位)
position: absolute(绝对定位)
position: fixed(固定定位)
边偏移：定位的盒子最终要移动的位置，分为 top、bottom、right、left四种
top: 距离父元素顶部的距离
bottom: 距离父元素底部的距离
right: 距离父元素右边的距离
left: 距离父元素左边的距离
static 静态定位（了解即可）
静态定位就是默认的定位方式，即无定位。
语法格式：
选择器{
position: static;
}
因为是默认的定位方式，所以该定位模式没有边偏移，在平时也很少用到。
relative 相对定位
相对定位就是以自我为中心，相对于自己原来的位置进行定位移动
语法格式：
选择器{
position: relative;
}
假设蓝色盒子在大盒子的居中位置（两条线是模拟坐标线），给蓝盒子加上相对定位
这时如果加上top: 100px; 让它相对自己原来的位置进行偏移，它就会相对于与自己原来的位置进行偏移：
而如果再加上left: 100px, 它又会相对于原来的位置进行偏移：
相对定位的盒子不像浮动元素，就算偏移离开了原来的位置，原来的位置仍保留占有，旁边的盒子仍然以标准流的方式对待它：
我们先定义两个盒子，效果如下
<style>
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
</style>
<div class="red"></div>
<div class="pink"></div>
然后给红色盒子定义相对定位，并进行偏移,红色盒子离开了，但是粉色盒子依旧老老实实的呆在原来的位置，不敢因为红色盒子离开了就占领它的地盘
.red {
background-color: red;
position: relative;
top: 300px;
left: 300px;
}
绝对定位 absolute
相对于加了相对定位的父元素进行偏移，如果没有父元素或者父元素没有相对定位，则以浏览器为准进行偏移
选择器{
position: absolute;
}
我们定义一个盒子，盒子会紧贴着浏览器的左上边：
<style>
body {
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
这时给盒子添加绝对定位并设置偏移量，此时没有任何父元素作为标准，它只能以浏览器作为标准进行偏移,效果如下：
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
当盒子有父元素同时父元素又有相对定位时，盒子会相对父盒子进行偏移：
<style>
.dad {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
margin: 0 auto;
}
.son {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<div class="dad">
<div class="son"></div>
</div>
这时给盒子添加绝对定位并设置偏移量：
.son {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 100px;
right: 100px;
}
当盒子的“爸爸”和“爷爷”都有相对定位时，以最近一级的父元素为准。
绝对定位一旦偏移离开，则不再占有原来的位置，脱离文档流。
先定义2个盒子：
<style>
div {
width: 200px;
height: 200px;
}
.div1 {
background-color: pink;
}
.div2 {
background-color: skyblue;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
然后给第一个盒子加上绝对定位并设置偏移量，粉色盒子离开了原来的位置后，脱离文档流，下面的蓝色盒子就挤了上去：
.div1 {
background-color: pink;
position: absolute;
top: 30px;
left: 30px;
}
利用相对定位和绝对定位做一个简易的轮播图轮廓，效果非常丑。。。主要是运用所学的定位知识去练习：
<style>
.box {
width: 500px;
height: 300px;
border: 2px black solid;
margin: 200px auto;
/* 给轮播盒子相对定位 */
position: relative;
}
.box div {
width: 20px;
height: 20px;
line-height: 20px;
background-color: gray;
/* 给左右箭头绝对定位 */
position: absolute;
/* 设置小盒子垂直居中 */
top: 50%;
transform: translateY(-10px);
text-align: center;
}
/* 左箭头定位在左边 */
.left {
left: 0;
}
/* 右箭头定位在右边 */
.right {
right: 0;
}
/* 给小圈圈绝对定位 */
ul {
margin: 0;
position: absolute;
bottom: 10px;
}
ul li {
float: left;
margin-right: 20px;
}
</style>
<div class="box">
<!-- 左箭头 -->
<div class="left"><</div>
<!-- 右箭头 -->
<div class="right">></div>
<!-- 轮播图下的小圈圈 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
fixed固定定位
固定定位是元素固定在浏览器的可视区域的位置。
语法：
选择器{
position: fixed
}
什么是可视区域呢？假如我们打开CSDN，浏览器最大化状态下，这个是可视区域
当我们缩小浏览器时，这块是可视区域
固定定位有几个特点：
- 与父元素无关
- 页面滚动不影响定位
- 不占有位置
定义了一个粉色盒子，给它加上固定定位并设置了偏移量，尽管把浏览器放大缩小，或是把浏览器向下滑动，盒子始终在可视区定位的位置，而且也不占用空间，把 p 文字压住了。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
top: 100px;
left: 30px;
}
</style>
<div></div>
<p>我是个p</p>
<p>我是个p</p>
....
<p>我是个p</p>
对自己学习到的定位知识进行整理，如果有什么遗漏或者错误，欢迎指正！