基本概念
CSS 有两个最重要的基本属性，display和position即布局和定位。布局在屏幕平面上的，定位则是垂直于屏幕的。
内联子元素的层叠
<div>
<span>文字</span>
<div>文字</div>
<span>文字</span>
</div>
三块不同地方的文字按出现的先后顺序层叠
position属性
position属性用于指定一个元素在文档中的定位方式。top,right,bottom和left属性则决定了该元素的最终位置。
static
static是position属性的默认值,浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。relative，absolute，fixed，默认为auto 。
relative
relative表示，相对于默认位置（文档流位置）进行偏移，即定位基点是元素的默认位置。但它原文档流位置不变，会留下空白。配合top, right, bottom, left 和 z-index 属性，relative的z-index的默认值为auto，虽然auto计算出来是0但是和零有区别，如果z-index不设置默认值为auto,那将不会创建层叠上下文，但是如果设置为0，那将会创建创建层叠上下文。用途1.做偏移（很少用）2.做absolute的爸爸。
absolute
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位,否则定位基点就会变成整个网页的根元素html。absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。尽量使用top和left否则在某些浏览器会乱
fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。元素会被移出正常文档流，并不为元素预留空间。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。手机上尽量不要使用fixed尽量使用top和left否则在某些浏览器会乱
sticky
元素根据正常文档流进行定位，偏移值不会影响任何其他元素的位置。很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
层叠上下文
定位元素的位置
所有定位元素都在文字上一层，默认属性auto计算出来是z-index为0，z-index为负那么会出现在background后面。
每一个层叠上下文都是一个小世界，只有在一个小世界里的z-index才可以相互比较，小世界里的鱼外界无关，z-index=0会创建一个层叠上下文。一般默认的层叠上下文是html标签
如何创建层叠上下文
- 文档根元素html标签
- 当元素的position绝对/相对且z-index不是auto时
- flex容器的子元素，且 z-index 值不为 auto；
- grid容器的子元素，且 z-index 值不为 auto；
- opacity 属性值小于 1 的元素（opacity和background里的ragb区别前者影响整个元素包括子元素）
- transform的属性不为none
- position为fixed的（默认为auto也创建）
absolute
- 绝对定位按出现的先后顺序覆盖，如果两个元素都是absolute那么会以此覆盖，如果两个都是float那么会依次显示，注意区别
- 注意绝对定位的基点如果基点动那么绝对定位元素也会动
- 同理float在父元素动时，float也会动
