CSS定位问题：给.dropdown设relative时为何absolute下拉元素被遮挡？

出现这个问题，和大多数人直觉以为的「relative破坏了absolute定位基准」无关，本质是两层CSS规则触发了连锁反应：

原始状态的正常运行逻辑 #

• .dropdown类元素本身自带overflow: hidden属性，以浮动方式排在导航栏内部，没有设置任何非static类型的定位属性。
• 内部的下拉菜单是absolute定位元素，按照CSS定位规则，它会沿着DOM树向上寻找最近的「设置了非static定位的祖先元素」作为自身的包含块。在原始无定位状态下，所有层级的祖先元素都未设置定位，下拉菜单的包含块最终会落到页面根容器上。
• 关键规则提示：CSS的overflow裁切，仅对以当前元素为定位包含块的子元素生效。既然下拉菜单的包含块是根容器，.dropdown自身的overflow: hidden根本管不到它，下拉菜单可以正常溢出、展开显示。

加上position: relative后的异常触发 #

• 给.dropdown加上relative定位后，它立刻从普通static元素变成了「非static定位元素」，直接成为内部absolute下拉菜单的最近定位祖先，也就是下拉菜单的新包含块。
• 此时.dropdown自身的overflow: hidden裁切规则开始对这个absolute下拉菜单生效：所有超出.dropdown自身矩形范围的内容，都会被直接裁切隐藏。由于下拉菜单设计上就是要向下展开、超出.dropdown的下边界的，被裁切后视觉上就像被遮挡了，完全无法正常显示。

快速修复方向 #

• 直接移除.dropdown元素上的overflow: hidden属性，从根源上取消裁切规则，保留relative定位的设置，即可让下拉菜单正常以.dropdown为定位锚点展开。
• 如果需要保留.dropdown原有布局效果，可在设置relative的同时，给.dropdown补充overflow: visible的规则，明确取消裁切限制。

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