一个div的分层

盒模型中的背景

直到border的外沿

属性position

static（默认值）

待在文档流里面

relative（相对定位，相对自身）

（升起来，但不脱离文档流）
占的位置不变，显示的位置跟原来不同

1. 使用场景
   1. 用于做位移（很少用）
   2. 用于给absolute元素做爸爸，给absolute当参照物
2. 配合z-index
   1. z-index: auto默认值，不创建新层叠上下文
      1. auto计算出来的值是0，但不能写0
      2. 优先级：正>0>负
   2. z-index: 0/1/2
   3. z-index: -1/-2

3. 经验

   1. 不要写z-index: 9999
   2. 学会管理z-index

      absolute（绝对定位，相对爸爸）

      （定位基准时祖先离他最近的position非static）

4. 使用场景

   1. 脱离原来的位置，另起一层，比如对话框的关闭按钮
   2. 鼠标提示
5. 配合z-index

6. 经验

   1. absolute是相对于祖先元素中最近的一个定位元素定位的
      1. 定位元素：不是static就是定位元素
   2. 某些浏览器上如果不写top/left会位置错乱
   3. 善用left: 100%
   4. 善用left: 50%；加-margin

      fixed（固定定位）

      （定位基准是viewport视口，无论鼠标怎么滑，他都不动）

7. 使用场景

   1. 烦人的广告
   2. 回到顶部按钮
8. 配合z-index
9. 经验
   1. 手机上尽量不要用这个属性，坑很多
      1. 例子：这个元素.container{transform:scale(0.9);}会让fixed没作用了
   2. 搜一下移动端fixed就知道了

      sticky（粘滞定位，一般不用）

层叠上下文（有一个默认范围是包裹的范围内）

z-index不能为auto（除position: fixed可以为auto）

1. 比喻
   1. 每个层叠上下文就是一个新的小世界（作用域）
   2. 这个小世界里面的z-index跟外界无关
   3. 处在同一个小世界的z-index才能比较
   4. 例子：http://js.jirengu.com/faliz/1/edit?html,css,output
2. 哪些不正交的属性可以创建它
   1. MDN文档有写
   2. 需要记忆的有
   • z-index=0
   • flex
   • opacity≠1（0.几的时候）
   • transform（如transform：translateX(-1px);）
   1. 忘了就搜层叠上下文MDN

      小贴士

      文字内容不换行

• white-space: nowrap;

  浏览器如何展示hover内容？

  点击butto属性，点击filter右边的:hov，里面的hover

  opacity和background的区别

  opacity指定不透明度，范围0-1，不为1时会把元素放入一个新的层叠上下文中
  background只影响背景色
  opacity影响border框里面所有东西（opacity可以创建一个层叠上下文）

  负z-index与层叠上下文

  记住负z-index逃不出小世界，如果它的祖先也有z-index，那它不能藏在background下方
  就是说
  里的元素z-index=-1不一定能逃出div，除非这个div没有层叠上下文
  小世界：http://js.jirengu.com/modez/1/edit?html,css,output