CSS的三种定位机制

普通流（标准流）

页面内元素按正常情况，从上到下，从左到右排序显示，块级元素占一行，一行内可以有多个行内元素

浮动

• 最主要的作用是可以使多个div在一行内显示（使用模式转换为inline-block有一些缺点，如盒子中间会出现缝隙，很难解决）
• 使元素脱离标准流(脱标)，元素不占位置
• float：left或right或none;
• 浮动有 隐藏模式转换 的作用，会使 块级元素 默认转换为 行内块元素，当给行内元素设置了浮动时行内元素默认转换为了行内块元素故可以设置宽高

定位

1. background-position：背景定位

2. 元素的定位属性：主要包括两个部分：定位模式和边偏移

   • 边偏移：元素走的位置
     • 边偏移属性有：
     1. top：顶端偏移量，定义元素相对于其父元素上边线的距离
     2. bottom：底端偏移量，定义元素相对于其父元素下边线的距离
     3. left：左端偏移量，定义元素相对于其父元素左边线的距离
     4. right：右端偏移量，定义元素相对于其父元素右边线的距离
   • 定位模式（定位的分类）
     • CSS中使用position属性定义元素的定位方式
     • 选择器{ position: 属性值 }
     • position可能的属性值有：
       1. static：自动定位（默认的定位方式）
          • 网页中所有的元素默认都是静态定位，其实就是按照 标准流 的定位
          • 元素为静态定位时，无法通过边偏移属性（top，bottom，left，right）来改变元素的位置
          • 静态定位唯一的用处：取消定位
       2. relative：相对定位，相对于其 原文档流 的位置进行定位
          • 相对定位最重要的一点，就是可以通过 边偏移 移动位置，但是元素原来的位置，继续占有
          • 每次移动的位置都是 以自己的左上角 为基点进行移动
          • 没有进行模式转换
       3. absolute：绝对定位，相对于其 上一个 已经定位（可以是绝对、相对或固定）的 父元素（祖先）进行定位
          • 没有父亲或者父亲没有定位时，以浏览器当前屏幕（的左上角）为基准进行对齐，当文档可以滚动时，定位元素会随着文档滚动
          • 当父级（祖先）元素有定位时以 最近一个 已定位的父级元素的左上角为基准进行定位
          • 和浮动一样，设置绝对定位后元素不占位置
          • 浮动不会越过父级元素的内边距，绝对定位可以越过父级元素的内边距
       4. fixed：固定定位，相对于浏览器窗口进行定位
          • 当文档可以滚动时，元素会固定在浏览器窗口的固定位置，不会随着文档滚动
          • 以浏览器窗口为参照物来定义网页元素
          • 固定定位的元素与其父亲没有任何关系，只认浏览器窗口
          • 固定定位元素 完全脱标，不占有位置，不随着滚动条滚动

3. 绝对定位 的盒子水平或则垂直居中对齐

   • 加了浮动或者定位的盒子，使用margin：0 auto;会失效
   • 水平居中算法
     • 首先 left: 50%，使盒子向右移动父盒子的一半大小
     • 然后 margin-left：负的自身盒子的一半大小
   • 垂直居中算法
     • 首先 top: 50%，使盒子向下移动父盒子的一半大小
     • 然后 margin-top：负的自身盒子的一半大小

注意：left，right，top，bottom的优先级有些特殊，同时出现时 遵循的是 先左后右，先上后下，而不是像一般的情况写在前面的会被写在后面的层叠掉

4. 定位模式转换
   • 元素添加 固定定位或绝对定位 后，和float一样，都会被默认转为行内块元素
   • 行内块元素的特点是 宽高和内容有关，所以转换为行内块模式后要注意给元素添加宽和高
   • 背景图片不会撑开盒子
5. 叠放次序 z-index
   • z-index默认属性值为0，取值越大，定位元素在层叠元素中越居上
   • 如果取值相同，则根据书写顺序，后来者居上
   • 后面数字一定不能加单位
   • 只有 相对定位、绝对定位、固定定位的元素有此属性，其余标准流、静态定位、浮动元素都没有此属性