层叠上下文/层叠顺序
网页的渲染是有多图层叠加渲染而成的，HTML元素沿着一条z轴按照先后顺序排列渲染。
层叠顺序
默认的层叠顺序是
z-index大于0>定位元素>行内元素>行内块>浮动>块级>z-index小于0
- 相同类型时，后面的元素默认比前一个元素层级高
- 块级元素中文字比背景高，文字会透过背景
- 行内元素中背景比文字高
层叠上下文:可改变元素的层叠顺序
会导致形成层叠上下文的属性有:
-
文档根元素(
html) -
position:absolute/relative;z-index:(不为auto) -
position:fixed/sticky;sticky：正常文档流。需设置top/left/botom/right属性，不然就相当于相对定位。相对最近的滚地元素进行定位。当超过阈值时，相当于固定定位 -
display:flex;z-index:(不为auto) -
opacity:(小于1) -
display:grid;z-index:
z-index大的不一定就在最上面，必须根据其父元素所在的z-index层级，即只能在父元素同一层级的元素比较，比父元素层级高的元素就算子元素z-index大于它，层级也比它低。
