css中onmouseenter子元素无法触发_CSS堆叠上下文

如图所示这是父元素没有被定位里面的子元素的堆叠顺序

从最底层开始，如果里面的兄弟元素重叠那么后面的会盖住前面，简称后来居上。

1. 负z-index
2. 背景
3. 边框
4. div块级元素
5. 浮动元素
6. 文字
7. 定位的z-index为0
8. 定位值为正数的z-index

但是如果父元素被定位了里面的z-index不为auto那么值为负的定位子元素就会改变位置，因为他满足了一个条件（堆叠上下文）。是不是很奇怪为什么？因为堆叠上下文吗？那么什么是堆叠上下文呢？我的粗浅理解是一些元素因为一些属性改变了层叠位置就被触发了堆叠上下文。具体定义我定义不了。说再多不如自己写代码试一试。

那么什么是堆叠上下文呢，满足以下条件的就是堆叠上下文。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

我说一下自己对堆叠上下文对z-index的影响

一个父元素里面两个子元素都设置了定位，且z-index都不为auto,那么他们两个的堆叠样式是谁上谁下呢，答案显而易见谁的z-index值大谁就在上面，因为触发了堆叠上下文，所有没有后来居上这个概念了。

那么子元素里面的子元素（简称孙子）如果也定位了并且z-index值也不为auto那么这两个孙子的堆叠高度是由其自身的z-index值的大小决定的吗？答案是否定的，一切根据其父元素的z-index来决定，爸爸有钱花儿子也有钱花，爸爸没钱儿子也没钱花。