布局与定位的区别

• 布局是屏幕平面上的

• 定位是垂直于屏幕的

  背景的范围是从哪到哪？

  border外边沿围成的区域
  

  一个div的分层

  
  

  position属性

• static 默认值，待在文档流里

• relative 相对定位，升起来，但不脱离文档流
• absolute 绝对定位，定位基准是祖先里的非 static
• fixed 固定定位，定位基准是 viewport（有诈）

• sticky 粘滞定位，不好描述直接举例

  经验

• 如果你写了 absolute，一般都得补一个 relative

• 如果你写了 absolute 或 fixed，一定要补 top 和 left

• sticky 兼容性很差，主要用于面试装逼

  position：relative

  使用场景

• 用于作位移（很少用）

• 用于给absolute元素作爸爸

  配合z-index

• z-index: auto默认值，不创建新层叠上下文(auto和0不一样)

• z-index: 0/1/2
• z-index: -1/-2

  经验

  学会管理z-index

position: absolute

使用场景

• 脱离原来的位置，另起一层，比如对话框的关闭按钮
• 鼠标提示

white-space: nowrap;//文字不换行

配合z-index

经验

• 很多彩笔都认为absolute是相对于relative定位的
  • absolute相对于祖先元素中最近的一个定位元素（position不是static）定位的
• 某些浏览器上如果不写top/left会位置错乱
• 善用left: 100%

• 善用left: 50%; 加负margin

  演示

  链接

  position: fixed

  使用场景

• 烦人的广告（在线发牌）

• 回到顶部的按钮

  配合z-index

  经验

• 手机上尽量不要用这个属性，坑很多，详情搜【移动端fixed】

  层叠上下文

  

  比喻

• 每一个层叠上下文就是一个新的小世界（作用域）

• 这个小世界里面的z-index跟外界无关
• 处在同一个小世界的z-index才能比较

  演示

  链接

哪些属性可以创建层叠上下文

• 看这里
• 需要记忆的有 z-index/ flex/ opacity/ transform
• 不用花时间去背

• 忘了就搜「层叠上下文MDN」

  opacity和background

  opacity: 0.5;和 background: rgba(255, 0, 0, 0.5);的区别

• opacity影响整个元素；

• background只有背景是透明的，内容不变

负z-index与层叠上下文

记住负z-index逃不出层叠上下文