前端 CSS 面试题, 说说网页元素的层叠顺序
前端 CSS 面试题, 说说网页元素的层叠顺序
QA
Step 1
Q:: 说说网页元素的层叠顺序 (z-index) 是如何确定的？
A:: 网页元素的层叠顺序由CSS的z-index属性确定，但z-index只有在元素的定位模式为relative、absolute、fixed或sticky时才生效。z-index的值越大，元素越靠上，反之越低。默认情况下，没有设置z-index的元素会根据其在DOM中的顺序显示，后面的元素会叠在前面的元素之上。
Step 2
Q:: 请解释 CSS 层叠上下文 (stacking context) 的概念。
A:: 层叠上下文是一个三维概念，它决定了元素的层叠顺序。一个新的层叠上下文可以由某些CSS属性触发，如z-index值为非auto、opacity小于1、transform值非none、position属性值为fixed或sticky等。在层叠上下文内，子元素的层叠顺序由z-index决定，但这个上下文整体相对于其父级的层叠上下文进行层叠。
Step 3
Q:: 解释 z-index 与 position 属性的关系。
A:: z-index 属性只有在元素设置了position属性为relative、absolute、fixed或sticky时才有效。如果元素的position属性为默认值static，即不定位，z-index的设置将不起作用。
Step 4
Q:: 当多个元素具有相同的 z-index 时，层叠顺序是如何确定的？
A:: 当多个元素具有相同的z-index值时，它们的层叠顺序将根据它们在DOM树中的出现顺序决定。后出现的元素会叠加在先出现的元素之上。
Step 5
Q:: 请描述 z-index 在 flex 和 grid 布局中的行为。
A:: 在flex和grid布局中，子元素的层叠顺序通常不受父容器的布局属性影响。然而，如果子元素设置了z-index，则它们会创建新的层叠上下文，且会在同一层叠上下文中按照z-index值进行层叠。需要注意的是，z-index设置只会在相同层叠上下文中的元素之间起作用。