css定位属性允许你对元素进行定位，也就是说它允许你定义元素框对于其正常位置应该出现的位置。css有以下三种定位机制：普通流，浮动，绝对定位。下面来分别进行说明：
一、普通流
普通流又称文档流，或者是标准流。指的是文档中可显示的元素在排列时开始位置以及它们所占的区域。又因页面中元素种类不同，所以会按各自特点去显示。一般是按从上到下，从左到右顺序输出内容。
二、浮动（float）
1、使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者是相邻浮动元素就会停止。
2、基本语法:选择器{float:left/right/none}
3、特征:
a、块元素可以在一行内显示
b、按照一个指定方向移动，遇到父级元素的边界或者是相邻浮动元素就停止
c、行内支持宽高
d、脱离文档流
浮动后面跟的元素（这个元素没有浮动）的位置是从前面浮动元素的位置开始。
如是认为标准流标签元素是在网页平面沿x,y轴布局，那浮动就是增加一维，在z轴上实现布局。标准流标签元素坐标为（x,y,0）浮动元素坐标可看成是（x,y,z）。当x,y相同，浮动元素会覆盖标准流元素。
注：浮动不是完全脱离文档流，所以非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）
e、块元素默认宽度会被改变（包裹性）
块元素按标准来说默认撑满一行，但当块元素浮动时且块元素不设置宽度，宽度就会被内容撑开
f、父级高度塌陷（破坏性）
子元素有浮动的时候，父级元素的高度就不会自动撑开
g、换行不会被解析成空格
浮动后的元素不属于文档流里的结构，所以换行，空格都和父级没有关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,span {
width: 200px;
height: 200px;
background: green;
margin-bottom: 10px;
float: left;
}
.box1{
opacity: 0.6;
}
.box3{
width: 200px;
height: 200px;
background: blue;
}
.box4{
/* width: 200px; */
/* height: 200px; */
border: 1px solid red;
float: left;
}
.box5{
border: 1px solid red;
}
.box6{
width: 200px;
height: 200px;
background: purple;
float: left;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<span style=" background: pink;">span</span>
<div class="box3" style="height: 300px;">我是漂亮小仙女我是漂亮小仙女我是漂亮小仙女我是漂亮小仙女</div> <!--说明的是特征a,b,c,d-->
<br>
<div class="box4">box4</div> <!--说明的是特征e-->
<br>
<br>
<div class="box5">
<div class="box6"></div> <!--说明的是特征f-->
</div>
</body>
</html>
4、float与inline-block的区别
由于浮动主要应用于：多个块元素在一行显示。float和display:inline-block都可以让元素在一行中显示，二者是有区别的，如果当元素高度不一样的情况下，想让他们按顺序排列就可以选择inline-block，但使用display:inline-block有不足那就是：盒子之间会出现间隙，无法控制，盒子在一行内位置无法调整。也可以用浮动，但用浮动的时候记得清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul {
width: 300px;
font-size: 0;
}
li {
width: 100px;
height: 100px;
background: palegreen;
font-size: 30px;
text-align: center;
line-height: 100px;
color: white;
/* float: left; */
/* float: left; */
display: inline-block;
}
</style>
<body>
<ul>
<li>1</li>
<li style="height: 300px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
5、清除浮动
a、clear 元素的某个方向上不能有浮动元素（left/right/both）
b、给父级添加高度（这个只是表面上去除，当父级没有高度的情况下是用不了的，如：瀑布流）
c、inline-block
具有与一上个清除浮动一样的问题，只是表面上清除，同时加了这个后元素后面就没有办法居中了
b、overflow:hidden(超出父级的隐藏)
如果子级有定位且这个位超出了父级的范围那样的话就看不到了
e、空标签
<div style="clear:both"></div>
空标签是没有内容但它是用于清浮动的，不太符合行为，结构，样式相分离的标准
f、br清除浮动
不合标准
g、after:伪类清除浮动（推荐，空标签的加强版）
after 代表选择到的元素的内容的最后面
after伪类的内容默认是一个行内元素
content 设置内容
格式：选择器:after{content:";display:block;clear:both;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.box1,
.box2 {
width: 100px;
height: 100px;
background: yellow;
}
.box1 {
float: left;
}
.box2 {
clear: both;
}
.box3 {
border: 1px solid rgb(207, 236, 207);
/* height: 100px; */
/* display: inline-block;
margin: 0 auto; */
/* overflow: hidden; */
}
.box4 {
width: 100px;
height: 100px;
background: pink;
float: left;
/* position: fixed; */
}
.box5 {
border: 2px dotted green;
}
.box6 {
width: 100px;
height: 100px;
background: pink;
float: left;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div> <!-- 说明的是a -->
<br>
<div class="box3">
<div class="box4"></div>
<!-- <div style="clear:both"></div> -->
<br clear="all">
</div> <!-- 说明的是b ,c，d,e,f-->
<br>
<br>
<div class="box5 clearfix">
<div class="box6"></div>
</div>
</body>
</html>
三、绝对定位
定位同浮动一样是脱离文档流的布局方式，但定位是完全脱离文档流，浮动是不完全脱离文档流。所以它可以完全由设计者确定其位置。通过定位可以实现盒子的覆盖，但是又不影响被覆盖盒子的位置。
1、定位的三种常用模式
a.relative 相对定位
含义：相对定位是相对于定位元素自身的原本位置，通过移动方向来移动位置，使得指定元素相对其正常的位置进行偏移。
移动方向：top/bottom/left/right
特点：只是位置有变化，元素和之前是没有变化；根据原来的位置来计算移动后的位置；不脱离文档流，元素移走后原来的位置还是会保留；加上相对定位后对原来的元素本身没有影响；可提升层级
用处：一般用于微调，和绝对定位配合使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: yellow;
color: white;
}
div:nth-child(1) {
background: green;
}
div:nth-child(2) {
background: pink;
position: relative;
/* 相对定位 */
left: 20px;
/* 移动方向 */
top: 20px;
margin: 10px;
/* margin和padding问题影响布局 */
padding: 10px;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
b .absolute 绝对定位
含义：相对于body或者某个定位流中的袓先元素来定位
绝对定位如果它的父元素设置了除static之外的定位，那么它就会相对于它的父元素来定位，位置是通过left,top,bottom,right属性来规定，如果它的父元素没有定位，那它就得看它父元素的父元素是否有除static外的定位，如果没有继续向外向上类推，总之，它的定位就是相对于设置了除static定位外的第一个袓先元素。如果所有的袓先元素都没有除static外的定位，那就是相对于文档body来定位（并非相对于浏览器窗口）
移动方向：top/bottom/left/right
特点：完全脱离文档流；行内元素支持所有样式（与加上浮动或者是inline-block的效果是一样的）；如果父级有定位那位置根据父级移动，如果父级没有定位，那位置根据可视区域移动（相对于body定位会随意页面的滚动而滚动）；提升层级；触发BFC
用处：一般配合相对定位来使用，父元素相对定位保留位置，不影响后续元素位置，子元素绝对定位，相对于父元素定位实现位置移动。
居中对齐问题：定位的盒子，margin:0 auto会失效。
水平居中可使用：left:50%;margin-left:-width/2 px
垂直居中可使用：top:50%;margin-top:-height/2 px
还有一种方法可以居中显示：left:0;right:0;top:0;bottom:0;margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div,span{
width: 200px;
height: 200px;
background: yellow;
color: white;
}
div:nth-child(2) {
background: green;
position: absolute;
top:400px;
}
div:nth-child(3) {
background: pink;
position: absolute;
left: 200px;
top:400px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px; /* 居中问题 */
}
span{
position: absolute;
background: chartreuse;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span</span>
</body>
</html>
c.static 静态定位
一般的标签元素不加任何定位都是属于静态定位，在页面的最底层属于标准流，也可以说是没有定位，positioin的默认值为static。
d.fixed 固定定位
固定定位可以让某个盒子不随着滚动条的滚动而滚动。如：对联广告，回到顶部按钮等
移动方向：top/bottom/left/right
特点：完全脱离文档流；行内元素支持所有样式；提升层级；触发BFC
用处：让某个盒子不随着滚动条的滚动而滚动
注意：position:fixed在android webkit不起作用这时我们可以在头部加上下列代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
补充知识点：
可视区：想让一个元素的宽高撑满整个屏幕，就要给这个元素的所有父级的宽度设置为100%。
e.inherit 继承定位
父级是什么定位，他自己就是什么定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
html{
height: 100%;
}
body{
height: 100%;
}
div{
height: 100%;
/* border: 1px solid pink; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
层级：z-index（层级）的大小由顺序来定，后面元素的层级要比前面元素的层级高
有定位元素的层级要比没有定位元素的层级要高
在都有定位的情况下，层级还是取决于书写顺序
它的值是一个数字，数字越大层级越高（在同一个层里）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:200px;
height:200px;
background:blue;
color:#fff;
position:relative;
}
.div1{
/*position:relative;*/
z-index:2;
}
.div2{
width:150px;
background:green;
margin-top:-50px;
z-index:1;
}
/*span{
background:yellow;
color:#FFF;
width:100px;
height:100px;
display:block;
margin-top:-50px;
}*/
</style>
</head>
<body>
<div class="div1">davina1</div>
<div class="div2">divina2</div>
<!--<span>span</span>-->
</body>
</html>
定位，居中例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 300px;
border: 1px solid green;
padding: 10px;
position: relative;
resize: both;
overflow: auto;/*resize 设置元素的大小可以拖动改变，必需要配合overflow:outo来使用 */
}
div a {
width: 100px;
height: 100px;
background: green;
text-decoration: none;
position: absolute;
}
.a1{
left:10px;
top:10px;
}
.a2{
right: 10px;
top:10px;
}
.a3{
left:50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
}
.a4{
left: 10px;
bottom: 10px;
}
.a5{
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div>
<a href="" class="a1"></a>
<a href="" class="a2"></a>
<a href="" class="a3"></a>
<a href="" class="a4"></a>
<a href="" class="a5"></a>
</div>
</body>
</html>
