CSS定位机制——且听风吟720

定位机制决定了元素在页面中的显示位置，一般分为以下三种

1.常规流

该情况下，元素默认从上向下，从左向右自然排列

2.浮动和清除

2.1 浮动float

1. 设置后的效果：
   • 元素脱离常规流，左右移动，具备了inline-block的属性（既可以同行显示，又可以有padding和margin）
   • 浮动之后的元素将环绕该元素
     
   • 当碰到另一个浮动框时，浮动停止
2. 取值：
   • left（左浮动）
   • right（右浮动）
   • none（不浮动）
   • inherit（继承父元素的浮动属性）
3. 浮动float可能导致的问题
   • 浮动溢出：设置浮动之后的元素和后面没设置浮动的元素发生重叠
     
   • 浮动塌陷：容器自适应内部小容器的高度，当小容器都浮动，高度塌陷为0
     

2.2 清除浮动clear

注：该处只是取消了设置clear属性的元素的浮动情况，后续元素的浮动仍然照常

1. 取值：
   • left（清除左浮动）
   • right（清除右浮动）
   • both（清除两侧浮动，最常用）
   • none（不清除浮动）
2. 其他清除浮动方法：
   1. 浮动元素后添加一个新的元素（该元素不设置浮动属性）
   2. 为浮动元素的父容器添加overflow：hidden属性
      • 为了防止IE6、7的兼容性问题，添加上*zoom：1；属性值
      • 较小的内容（ul、li等）建议使用该方法
   3. 用after伪类元素清除浮动（相对常用）
      • 大块内容（div等）建议使用该方法

<style>
	.div:after{
		content:".";
		display:block;
		height:0;
		visibility:hidden;
		clear:both;
	}
	.div{*zoom:1;}
</style>

3. 其他清除浮动的方法：
   1. 设置父元素的高度（只适合高度固定的布局）
   2. 父级元素一块儿浮动（不推荐，可能产生新的浮动问题）

3.定位position

3.1 静态定位static

• 让元素恢复到常规流状态
• 忽略top、bottom、left、right以及z-index的设定
• 相邻元素的外边距margin变成二者之间较大的

3.2 相对定位relative

1. 含义
   • 让元素成为可定位的祖先元素（对absolute有用）
2. 偏移
   • 相对于元素常规流位置进行偏移设置，但其常规流的位置保留
   • 可设置的偏移方向：
     • top
     • bottom
     • left
     • right
   • 可设置的值：
     • 百分比（%）
     • 数值（px）
     • auto
   • 浮动元素依照浮动后的位置进行偏移
   • 偏移后的元素若重叠，可用z-index进行层位置的修改

3.3 绝对定位absolute

1. 含义
   • 让元素脱离常规流进行偏移，但不给该元素保留其常规流位置
2. 偏移规则
   • 元素是根据其最近定位的祖先元素（position属性不为static的）来相对定位（偏移）的
   • 如果找不到，则以body为准
   • 根据代码顺序，最后脱离的显示在最顶层（可用z-index调整堆叠顺序）
3. 其他
   1. 宽度
      • 当元素的宽高设置为百分比时，会找最近的定位的祖先元素（position属性不为static的）
      • 如果找不到，则以body为准
   2. 填充

      • 绝对定位的元素没有设置宽高、四边偏移量都是0时，会填充满整个父容器
        

      • 绝对定位元素四边的偏移量都是0，且margin设置全是自动，则相对于父容器水平垂直居中
        

      • 绝对定位元素四边偏移量都是auto，则保持原位置不动
        

3.4 固定定位fixed

• 同整个网页（body）做绝对定位
• 元素不会随着窗口滚动条而滚动（可用来做导航栏）

3.5 吸附定位sticky

1. 含义
   • 有relative的相对定位效果，也有fixed的不随窗口滚动的效果
   • 产生偏移时，原位置还是在常规流中保留
2. 吸附效果
   • 最近的祖先元素可以滚动（有滚动条）：
     • 以该祖先元素的窗口来固定位置
   • 最近祖先元素都不可以滚动：
     • 以页面的窗口来固定位置