什么是层叠上下文
首先html的元素谁上谁下总得有一个规则.一般来说从下到上,应该是布局到装饰到内容,应该是子元素在上父元素在下.可是这不是绝对的,我们有时需要指定的元素在上,或者特别的装饰在上.
如果我们需要某个元素高人一头,就给它设置以下属性
- html标签
- 定位元素,除static外,且z-index为数值
- flex和grid的子元素,且z-index为数值
- opacity属性值小于的元素以下是CSS3
- ...
这样我们就能指定元素让他显示在其他元素前面,可是还有问题,层叠上下文元素之间又要怎么论资排辈呢?这样z-index存在的意义就来了,如果两个元素是同级的那么就比较他们的z-index数值.那么如果两个元素不是同级的呢,他们也可以依照z-index?
我们来想想如果不同级别的元素也依照z-index,那么会非常混乱.试想以下,一个层叠元素的子元素的z-index数值应该是多少呢,难道也必须写z-index吗,不同级别的比较要加上所有祖先元素的z-index值吗.所以说,如果z-index可以在不同级别间是十分混乱的.
所以层叠上下文元素规定了不同级别的z-index比较是无效的.他们需要找到能够代表自己的在同一个层叠上下文上的元素来比较.
另外z-index可以为-1,他可以跑到普通元素的下面,但是如果父元素是层叠上下文元素,还是老老实实呆在上边吧.
层叠顺序,层叠等级,层叠水平
不管是顺序,等级还是水平,在同一层叠上下文中,规则就是下图所展示的
