CSS定位

定义机制

1. 普通流：元素按照其在html中的位置顺序决定排布的过程
2. 浮动

1. float属性可用的值：

    left：元素向左浮动

right：元素向右浮动

none：元素不浮动

inherit：从父级元素继承浮动属性

注意：float在绝对定位和display为none时不生效

2. clear属性：去掉浮动属性（包括继承来的属性）

可用的值：

left、right：去掉元素向左、向右浮动

both：左右两侧均去掉浮动

inherit：从父级继承来clear的值

3. 绝对布局

二、属性

1、position：把元素放在一个静态的、相对的、绝对的或固定的位置中

（1）static（静态定位，是一个默认值）：对象遵循常规流，此时4个定位偏移属性不会被应用

（2）relative：相对布局，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，left，bottom这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

<1>使用相对定位，位置从自身出发

<2>不脱标：还占据原来的位置，如果下面有元素的话不能顶上去

<3>子绝父相（父元素相对定位，子元素绝对定位）

<4>行内元素使用相对定位不能转行内块元素

（3）absolute：绝对定位，对象脱离常规流（脱标：元素使用之后不占据原来的位置，有点类似于浮动，所以如果下面有元素的话就会顶上去），此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位祖先元素则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他margin折叠

<1>元素使用绝对定位，位置从浏览器出发

<2>嵌套的盒子，父盒子没有使用定位，子盒子绝对定位的位置是从浏览器出发

<3>嵌套的盒子，父盒子使用定位，子盒子绝对定位的位置是从父元素位置出发

<4>给行内元素使用绝对定位之后，转换为行内块元素（不推荐使用）

（4）fixed：固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动条滚动

<1>脱标：固定定位之后，不占据原来的位置（类似于浮动，如果下面有元素的话就会顶上去）

<2>元素使用固定定位之后，位置从浏览器出发

<3>元素使用固定定位之后会转换为行内块元素

<4>

2、top：元素向上的偏移量

3、left：元素向左的偏移量

4、right：元素向右的偏移量

5、bottom：元素向下的偏移量

6、z-index：设置元素的堆叠顺序

定位的盒子居中显示：

1. margin:0 auto；只能让文档流的盒子居中（也就是没有脱标的盒子）
2. 定位脱标盒子居中：先向右走父盒子的50%，再向左走子盒子的一半（margin-left:负值）