1 div的分层

1.1 背景的范围

元素的背景(background)的范围, 是border外边沿围成的区域.

1.2 浮动元素脱离文档流

浮动(float)元素脱离文档流(normal flow), 其实就是浮在文档流上面一点点而已.

1.3 一个div的分层

一个div元素的分层, 从底部到顶部方向, 依次是
background(底部) > border > 块级(block)子元素 > 浮动(float)元素 > 行内(inline)子元素 (顶部).

image.png

2 position属性

position是CSS的属性之一, 这个属性用于指定一个元素在文档中的定位方式. top，right，bottom 和 left 属性则决定了该元素的最终位置.
取值:

  1. static: 默认值. 这是静态定位. 用于设置元素待在文档流. 静态定位无法改变元素位置.
  2. relative: 相对定位. 升起来, 但不脱离文档流.
  3. absolute: 绝对定位. 脱离文档流. 定位基准是祖先里的非static元素.
  4. fixed: 固定定位. 定位基准是viewport.
  5. sticky: 粘滞定位.

语法举例：

  1. div.a{
  2.     position: relative / absolute / fixed / sticky；
  3.     left: 20px;
  4.   right: 20px;
  5.     top: 20px;
  6.     bottom: 20px;
  7. }

经验:

  1. 如果写了absolute, 一般也要设置relative.
  2. 如果写了absolute或fixed, 一定要补top和left.
  3. sticky 兼容很差, 主要用于面试装逼.

2.1 position: relative

(1) 使用场景

  • 用于做位移, 但很少用.
  • 用于给absolute元素做父元素.

(2) 配合 z-index

  • z-index: auto; 这是默认值. 作用是不创建新的层叠上下文. auto的值一般取0, 但是不能写0.
  • z-index: 0/1/2;
  • z-index: -1/-2;

备注: 两个元素, 只要其中一个元素的z-index的值比另一个元素的值大数值1, 前者就能压住后者.
A元素z-index的值 — B元素的z-index值 > 1, 则A元素会压住B元素.

2.2 position: absolute

(1) 使用场景

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

(2) 配合z-index
(3) 经验

  • absolute其实是相对于祖先元素中最近的一个定位元素定位的. 定位元素是指元素的position不是static的元素.
  • 某些浏览器上如果不写top和left, 或top和right会位置错乱. top, bottom, left, right四个最少要写两个, 即top和bottom写一个, left和right写一个.
  • 善用 left: 100%; 这个代码的作用是让元素移到右端(不是左端).
  • 善用 left: 50%; 加负margin. 这两个代码的作用是居中对齐.

2.3 position: fixed

(1) 使用场景

  • 烦人的广告
  • 回到顶部按钮( 注意: 父元素不能同时设置transform属性, 如果父元素同时设置transform属性, 会导致子元素不能相对于viewport定位)

(2) 配合 z-index
(3) 经验
手机上尽量不要用这个属性, 坑很多.

3 层叠上下文

3.1 什么是层叠上下文

(1) 概念
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
(2) 特点

  • 每个层叠上下文就是一个新的小世界(作用域).
  • 这个小世界里面的z-index跟外界无关.
  • 处在同一个小世界的z-index才能比较.

(3) 层叠顺序
在下图中, 正z-index在最上层, 其他元素依次往下排列.

image.jpeg

3.2 什么是z-index属性

z-index属性设置一个定位元素沿z轴的位置, 即设置定位元素的堆叠顺序. z轴定义为垂直延伸到网页显示区的轴. (按: 定位元素是指position属性值不是 static的元素.)
特点:

  • 当元素之间重叠的时候, z-index的值较大的元素会覆盖较小的元素在上层进行显示.
  • 一个元素的z-index的值如果为正数, 则该元素离用户更近, 为负数则表示离用户更远.
  • z轴垂直于网页却“看不见”, 它是一条虚构的轴.
  • 如果一个元素的z-index=-1, 并且这个元素的父元素自身没有层叠上下文, 那么这个元素的位置就会比父元素的background要低.

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

文档中的层叠上下文由满足以下任意一个条件的元素形成(这里只列举了部分较常见的属性)：

  • 文档根元素（）；
  • position: absolute; 或 position: relative; 且 z-index ≠ auto 的元素；
  • position: fixed; 或 position: sticky 的元素;
  • flex 容器的子元素, 且 z-index ≠ auto;
  • grid 容器的子元素, 且 z-index ≠ auto;
  • opacity属性值＜1 的元素;
  • transform属性值不为 none 的元素.