橘子园

种橘子的地方

0%

z-index要点

理解

可以理解为”版本号“,即父元素为主版本,子元素为次要版本,由此来确立层叠顺序.

父子

父子元素下,只要父元素设置了z-index值,无论子元素如何设置,其都在其父元素之上显示,但是,如果父元素没有设置,或设置为默认值,当子组件设置z-index为负值时,子组件会放置于父组件之下.

默认值

z-index的默认值auto的意思为,不新建堆叠上下文,元素所在的堆叠上下文和其父元素相同.

问题

基于以上规则,子元素作为次要”版本号”无法堆叠在其父版本的兄弟版本上时,解决思路有可以通过移除不同级别的菜单之间的重叠,或者使用ID选择器指定独立的(不同的)z-index值,或者减少HTML的层级。