为何Kendo菜单显示时出现文本重叠？position:unset原理咨询

问题核心是**堆叠上下文（stacking context）**的层级冲突：

• Kendo菜单的下拉面板默认会设置较高的z-index，但你的段落文本之所以能“穿透”显示在菜单上方，是因为段落元素创建了独立的堆叠上下文，这个上下文的层级优先级超过了菜单的堆叠上下文。
• 堆叠上下文的常见触发条件包括：元素设置了position: relative/absolute/fixed/sticky（哪怕没显式写z-index）、使用了某些CSS变换属性等。你的段落大概率是被某个CSS规则（可能是继承或直接设置）加上了这类定位属性，从而生成了自己的堆叠上下文。
• 当你给段落添加position: unset时，相当于把它的定位重置为默认的static——static定位的元素不会创建堆叠上下文，此时段落就回到了根堆叠上下文当中。由于Kendo菜单的下拉面板在根上下文里的z-index高于普通文本，菜单就能正常遮挡住段落内容了。
• 至于段落位置没变，是因为unset只是重置定位类型，没有修改任何布局偏移属性（比如top/left），所以它在文档流里的位置和之前完全一致，只是层级关系发生了变化。

内容的提问来源于stack exchange，提问作者Sunil