1. 定位的概念
手动控制元素在包含块中的精准位置
涉及的属性：position
position取值：
static：默认值，静态定位(不定位)
以下都是有进行定位的
relative：相对定位
absolute：绝对定位
fiexed：固定定位
一个元素的position的值只要不是static就认为此元素为定位元素
2. 定位元素的特点：
1、定位元素会脱离常规流(相对定位除外)
3. 脱离常规流的元素的特点：
1、常规流中的块盒和行盒都会忽视之
.item{
width: 50px;
height: 50px;
background-color: red;
margin: 5px;
}
.demo{
width: 100px;
height: 100px;
border: 2px solid blue;
position: relative;
/* float: left; */
}
<div class="box">
<div class="demo"></div>
<div class="item">div</div>
<span class="item">span</span>
</div>
2、常规流自动高度会忽视之
4. 相对定位
1、定位里面比较特殊的一个，不会使元素脱离常规流
2、元素相对于自己的初始位置进行偏移
3、相对定位的偏移不会对别的元素造成任何影响
4、偏移值里面左右有冲突的时候，以左偏移为准，上下有冲突的时候，以上偏移为准，这种冲突的情况尽量避免。
.box3{
width: 300px;
border: 2px solid brown;
padding: 5px;
}
.box3 div{
height: 50px;
background-color: red;
border: 2px solid blue;
margin-bottom: 5px;
}
.item1{
margin-left: 50px;
}
.item2{
position: relative;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
opacity: 0.5
}
<div class="box3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
5. 绝对定位
1、宽高为auto的话，宽高就是适应文本内容
2、元素的包含块会变化，包含块决定了元素定位的坐标系。元素的包含块会变成祖先元素中第一个定位元素(相对定位/绝对定位/固定定位)，该元素的填充盒为其包含块。
一般用来提供包含块的元素设置成relative有两个原因：a、不影响元素原来的位置。b、不改变元素原来的排列属性(原来是常规流，现在还是常规流。原来是浮动，现在还是浮动。)。而此元素已经成为了定位元素，可以给子元素提供包含块。
所以相对定位一般就是用来给子元素需要进行绝对定位的包含块的，因为如果就用相对定位来调整元素自身的精准位置的话，那么此元素在自身位置偏移走了，但是自身的那块空间仍然在占用着，那么这块占用的空间该做何用呢？
如果在祖先元素里面一直找不到定位元素的话，该元素的包含块为整个网页(初始化包含块)
6. 固定定位
1、和绝对定位只有一点不同：包含块不同。
固定定位的包含块，为浏览器的可视窗口(视口)
7. 固定定位和绝对定位的共同点和区别
首先说一下共同点：固定定位和绝对定位元素一定是块盒，一定不是浮动元素(会将float强制改为none)，且没有外边距合并。区别如下：
.box{
border: 2px solid brown;
padding: 10px;
position: relative;
}
h3{
height: 300px;
border: 2px solid wheat;
line-height: 550px;
color: #fff;
background: linear-gradient(red, blue)
}
.item{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.7;
/* position: fixed; */
position: absolute;
left: 0;
bottom: 0;
color: #fff;
font-size: 26px;
}
<div class="box">
<h3>第1段</h3>
<h3>第2段</h3>
<h3>第3段</h3>
<h3>第4段</h3>
<h3>第5段</h3>
<h3>第6段</h3>
<div class="item">
当前样式为：
。。。
</div>
</div>
7.1 固定定位
只设置item为固定定位
可以看到元素item一直停留在视口的左下角，item元素是固定不动的
7.2. 包含块为第一屏网页的绝对定位
item的祖先元素没有定位元素，那么item的包含块就是初始化包含块，也就是网页的第一屏。
只设置item为绝对定位
可以看到元素item会跟随第一屏页面，始终在第一屏的左下角，item元素是随页面移动的
7.3. 包含块为其父元素的绝对定位
设置item为绝对定位的同时，再设置item的父元素box为相对定位
可以看到item元素始终位于页面中box元素的左下角。
8. 定位元素的宽高
高度：自动适应文本内容高度
宽度：相对定位元素宽度仍然充满整个包含块，绝对定位和固定定位元素的宽度适应文本内容的宽度。
9. 定位实现居中
三部曲：
1、给元素定宽
2、设置position为绝对(固定)定位
3、设置margin为auto
.box{
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.item1{
position: absolute;
}
.item2{
position: fixed;
}
.box div{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
background-color: red;
}
<div class="box">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
10. 定位元素的重叠
定位元素重叠的时候，会相互覆盖，需要通过z-index来设置各元素的堆叠顺序
z-index可以为负值，值越大，越靠近用户。
常规流和浮动元素默认可以看作为0
只有对定位(相对定位、绝对定位、固定定位)元素设置z-index才有效
