前端学习_05.浮动与定位

浮动与定位

浮动

• a)浮动
  i.定义：元素脱离文档标准流，不受文档格式的约束，漂浮到漂浮层

  (1)脱标方式：浮动、固定/绝对定位
  (2)浮动：表示元素脱离标准流后，按流式布局方式排列元素

  ii.浮动带来的问题

  (1)不同区域的浮动元素同行贴边
  (2)浮动子元素不能撑开父容器的高度

• b)浮动清除
  i.通过设置overflow属性清除浮动(hidden)
  ii.通过设置clear属性清除浮动
  iii.细节注意：float元素浮动方式
  

  (1)找上一个元素，上一个元素如果没有浮动呢，则贴上个元素的底边
  (2)如果上一个元素有浮动，则会贴上一个元素的左右两边

  iv.clear：指的是不允许当前清除浮动元素左右两边存在浮动元素
  

  (1)清除浮动，不能让其他元素移动
  (2)只能做到让浮动元素不在一行

  v.清除浮动，让父元素有高度
  

  (1)父盒子的高度无法撑开
  (2)父盒子背景无法显示
  (3)给父盒子设置一个固定高度
  (4)给父盒子设置overflow:hidden，起到清除浮动的功能
  (5)clear属性来清除

定位

• a)定位
  i.定义：对当前标签对象进行定位操作，属性规定元素的定位类型
  

  (1)取值范围：静态（static），相对（relative），绝对（absolute）、固定（fixed）
  (2)css四个属性（top、left、right、bottom）只有在设置了position值为relative、absolute、fixed的情况下才有效。

  ii.relative：相对定位
  

  (1)通过top、left、bottom、right来设置元素的新位置偏移(相对于当前位置)
  (2)相对定位的元素并没有脱离标准文档流，对原来标准流中的元素依然受影响

  iii.fixed：固定定位
  

  (1)通过top、left、bottom、right来设置元素的新位置偏移(相对于浏览器视窗)
  (2)固对定位的元素脱离标准文档流，不受文档流约束

  vi.absolute：绝对定位
  

  (1)通过top、left、bottom、right来设置元素的新位置偏移(有以下两种情况)
  (2)如果绝对定位的所有父元素都没有定位，则会相对于页面偏移
  (3)如果绝对定位的父元素有定位，则会相对于该父元素偏移
  (4)固对定位的元素脱离标准文档流，不受文档流约束

  v.如果子元素是绝对定位，一般父元素需要设置为相对/固定/绝对定位。
  

z-index（元素覆盖层级关系）

• a)z-index
  i.定义：设置当前page中元素的层叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  (1)z-index只对设置了position的元素生效(static除外)
  (2)随父性：父元素的z-index值，会影响子元素的重叠效果
  (3)如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。