CSS定位和层叠上下文

补充代码

1. :hover 鼠标经过时的效果，开发者工具选择:hover后才能看到效果

2. white-space:nowrap 文字内容不准换行

定位

布局和定位的区别

• 布局是屏幕平面上的一维上下左右
• 定位是垂直于屏幕的

盒模型层叠关系

• border在文字的下面
• 背景在border下面

浮动脱离文档流

• 相较于文档流让元素浮动起来
• Z轴上浮了一点，但盒内容依旧在最上层

position

• 属性
  1. static 默认值 待在文档流内
  2. relative 相对定位，升起来，但不脱离文档流
  3. absolute 绝对定位，定位基准是祖先里的非static，不是只有relative才能做基准
  4. fixed 固定定位，定位基准是viewport（可视窗口）
  5. sticky 粘滞定位，黏在屏幕可视窗口边缘

position：relative

• 场景

  1. 位移（很少）
  2. 给absolute做父亲

• 配合z-index 默认是auto，不创建层叠上下文

• 学习到的经验

  1. 写z-index：9999的都不太理解这个代码
  2. 学会管理z-index

position:absolute

• 场景

  1. 脱离原来的位置，另起一层，比如关闭按钮以及对话框的某个按键
  2. 鼠标提示 (PS：:hover 鼠标经过时的效果，开发者工具选择:hover后才能看到效果)

• 配合z-index

• 学习到的经验

  1. absolute是相对于祖先元素中最近的一个定位元素定位的(除默认static)
  2. 某些浏览器如果不写top/left会出现位置错乱的bug，建议写上
  3. 善用left:100%
  4. 善用left:50%,加负margin (居中)

position fixed 相对于视口定位

• 场景

  1. 页面能一直保持在一个位置的广告
  2. 回到顶部按钮

• 配合z-index

• 学习到的经验

  1. 手机端尽量不要用这个定位，坑很多
  2. 问题详情搜索移动端fixed
  3. 父盒子最好不要有transform属性，会出问题

position sticky 粘滞定位

• 场景

  1. 页面导航栏，希望一直显示在上方的栏

• 学习到的经验

  1. 有一定的兼容问题，用之前查一查浏览器兼容性的问题

层叠上下文

z-index

1. z-index=正数 则该盒子在层叠上下文的上层

2. z-index=负数 在层叠上下文的下面（背景之下）且没有逃逸出层叠上下文

层叠上下文

• 每一个层叠上下文就是一个新的小世界（作用域）
• 这个世界的z-index跟外界无关
• 只有处在同一个小世界的z-index才能相比较

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

• MDN 查询
• 需要记住常用的有 z-index/flex/opacity(透明度)/transform
• 如果忘记了就搜层叠上下文 MDN

负z-index

• 负的z-index 逃不出小世界