今天来记录一些css的定位和层叠的知识
CSS定位
position 属性规定应用于元素的定位方法的类型有五个不同的位置值：static，relative，fixed，absolute，sticky
元素使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则默认情况下这些属性将不起作用。HTML 元素默认情况下的定位方式为 static。 1.static
静态定位的元素不受 top、bottom、left 和 right 属性的影响。 position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
2.relative
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
3.fixed
fixed的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
4.absolute
absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
5.sticky
sticky 的元素根据用户的滚动位置进行定位。 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
层叠上下文
形成新的层叠上下文的条件
position:relative 或 absolute;并且 z-index 不是auto
position: fixed或sticky
flex或grid的子元素;并且 z-index 不是auto
opacity的值小于1
transform的值不为none
will-change的值不为通用值
层叠顺序
层叠上下文特性
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
层叠上下文未指定 z-index 时，其层叠等级与 z-index : 0 相同， 要比普通元素高。指定 z-index 时按照层叠规则来。
z-index: auto 和 z-index: 0 在层叠等级上属于同一级。但是 z-index: 0 就是符合这一条“z-index 为数值”会使得元素升级为层叠上下文
当互相层叠的元素都是层叠上下文元素，即明确的有 z-index 值的时候（没有明确的 z-index 值的层叠上下文也就是 CSS3 创建的层叠上下文 z-index 值为0 ）直接比较 z-index 的值，值大的处在值小的元素的上方。
