文章预览：
1.CSS三种定位机制2.元素的浮动3.元素的定位4.相对定位position:relative5.绝对定位position:absolute6.固定定位position:fixed7.z-index8.元素居中1.CSS三种定位机制
1.普通流
普通流，也称为文档流、常规流。它指的是元素按照其在HTML页面文件中的位置顺序，决定排版布局的过程。除非专门指定，否则所有盒子都被定位在普通流中。
2.浮动
3.绝对定位。
浮动和绝对定位都使得元素脱离普通流，元素原先在普通流中所占的空间会关闭，就好像该元素原来就不存在一样
2.元素的浮动
1.浮动属性（float）
浮动（float）这个属性用来设置元素是否浮动及其具体的浮动方式，它的语法如下：
float: none | left | right;
none：不浮动。页面中的元素默认都不浮动。
left：元素向左浮动。
right：元素向右浮动。
使用浮动属性实现一行多列
用浮动属性实现文绕图效果
2.当浮动块所在的父元素宽度不够，不能同时容纳第二个浮动元素时，该元素将自动换行显示.
3.与inlineblock的比较：利用浮动和行内块元素（display:inline-block）都可以实现块元素同行排列
但它们之间还有一个本质的区别，那就是浮动元素是脱离普通流，不占据普通流中的位置；而行内块元素还在普通流中，占据普通流中的位置。
4.清除浮动属性
清除浮动属性clear用来清除其他浮动元素对本元素的影响，
clear属性
它的语法如下：
clear：none | left | right | both;
none：不清除，即允许本元素左右两边都可以有浮动元素；
left：本元素左边不允许有浮动元素；
right：本元素右边不允许有浮动元素；
both：本元素左右两边均不允许有浮动元素
使用清除属性解决：浮动元素与普通流中的元素发生重叠
3.元素的定位
1.定位属性（position）
实现元素定位主要有三种方式：
相对定位
绝对定位
固定定位
边偏移属性：用来确定元素的最终位置
z-index属性：用来确定元素的层叠顺序
2.定位属性
具体语法如下：
position: static | absolute | relative | fixed;
各个取值的含义如下：
static：静态定位。默认取值，即页面中的所有元素默认均为静态定位。
absolute：绝对定位。
relative：相对定位。
fixed：固定定位
4个边偏移属性
top——定义元素上边界相对于参照对象上边界的距离
right——定义元素右边界相对于参照对象右边界的距离
left——定义元素左边界相对于参照对象左边界的距离
bottom——定义元素下边界相对于参照对象下边界的距离
一般只用其中的1个或2个边偏移属性就可以定位子元素
4.相对定位position:relative
相对于该元素的默认位置进行位置的偏移定位
如果一个元素进行相对定位，它将以它原本所在的位置（未定位时的位置）为基准点，然后，可以通过设置垂直或水平偏移属性，让这个元素“相对于”它的基准点进行偏移
5.绝对定位position:absolute
绝对定位的元素的位置由边偏移属性确定，偏移值以其“最近的已定位（即position属性值不等于static）”的祖先元素为参照元素，若祖先元素都未定位，则以body为参照元素进行定位。
绝对定位使元素完全从网页中独立出来（而漂浮在网页上），因此该元素可能会覆盖其他元素或者被其他元素覆盖。
绝对定位时，参照对象的确定要根据该绝对定位元素的祖先元素是否定位进行判断。
a.参照对象为body：如果不存在“已经定位”的祖先元素，则参照对象是body。
页面中三个块：红色wrapper块包含main块，main块又包含sub块。Sub块采用绝对定位（left和top为0px），wrapper块和main块均未定位
b.参照对象为父元素：如果父元素是“已经定位”（即要求position值不为static）的，则参照对象是其父元素
页面中三个块：红色wrapper块包含main块，main块又包含sub块。Sub块采用绝对定位（left和top为0px），wrapper块未定位，main块为相对定位
c.参照对象为最近的已定位祖先元素：如果父元素没有定位（即position值为默认值static），则相对于其最近的一个有定位设置的祖先元素进行绝对定位。
页面中三个块：红色wrapper块包含main块，main块又包含sub块。Sub块采用绝对定位（left和top为0px），wrapper块为相对定位，main块未定位
6.固定定位position:fixed
固定定位是相对于浏览器的某一位置，故固定在浏览器的视框位置。当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置
.div1{border:2px groove #0000CC;height: 200px;width: 180px;margin: 20px;padding: 20px;left:20px;top:20px;position: fixed;}
7.z-index
利用position属性重新定位元素的位置以后，可能会发生与其他元素的重叠。
z-index属性用以控制多个元素重叠时的顺序关系。取值可以是正数也可以是负数，默认取值为0。取值越大，则在层叠关系中越处于上层；反之，则处于下层。
同样的，z-index属性也需要配合使用position定位属性（不包括static值）时才能生效，单独使用也是无效的
8.元素居中
1.绝对定位元素居中
对于绝对定位的元素，要使其在页面中水平居中可以通过设置负外边距（margin）值来实现。如图所示，首先设置绝对定位元素（图中小块）左边线向右偏移页面宽度的50%，此时元素左边线紧靠页面中线；再设置左外边距值为负的元素宽度的一半，这样就使得绝对定位的元素在页面中居中
#main {position: absolute;left: 50%;top: 0px;width:200px;height:200px;background-color: #CCC;margin-left:-100px; /*值为自身width：200px的一半*/}
2．相对定位元素居中
外边距自动的方式:margin:auto
负外边距的方法
#main {position: relative;width:200px;height:200px;background-color: #CCC;margin:0 auto;}
