两个问题

  • 背景的范围是从哪到哪？ -由border的外边沿围成的范围

  • 从侧面看一个div是什么样子？ - 从下到上依次是background，border，块级子元素，浮动元素，内联子元素。（浮动元素脱离了文档流，其实就是浮起来了一点点）

    position

    属性

  • static - 默认值，呆在文档流里

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

  • sticky - 粘滞定位

    经验

  • 写absolute，祖先元素要补一个relative

  • 写absolute和fixed，要加top和left

    position: relative

    使用场景

  • 做位移

  • 给absolute当爸爸

    配合z-index

  • z-index: auto默认值，不创建层叠上下文

  • z-index: 0/1/2

  • z-index: -1/-2

    经验

    不要写z-index: 9999

    position: absolute

    使用场景

  • 脱离原来的位置，另起一层

  • 鼠标提示

    配合z-index

    经验

  • absolute是相对于祖先元素中最近的一个定位的元素定位的

  • 写top和left
  • 善用left:100%

  • 善用left:50% 负margin

    position: fixed

    使用场景

  • 烦人的广告

  • 回到顶部按钮

    配合z-index

    经验

    手机端不要使用

    层叠上下文

    思考一个问题：z-index:5和z-index:10哪个高？

  • 每个层叠上下文都是一个小世界

  • 这个小世界的z-index和外界无关

  • 一个小世界的z-index才能比较

    可以创建层叠上下文的属性

  • z-index

  • flex
  • opacity
  • transform