rgba遮罩层视觉上不可靠，因其依赖下层背景色且仅做Alpha混合计算；下层非纯色时易发灰失真，深色模式或复杂堆叠下更难控制。

z-index不生效主因是父容器未形成层叠上下文；它仅对定位元素有效，且层级比较限于同一层叠上下文内，常见陷阱包括父元素position:static、隐式创建新上下文（如opacity

本文详解多级下拉菜单hover失效的根本原因（子元素层级关系误判）、正确使用相邻兄弟选择器+替代子选择器>，并解决二级下拉菜单顶部空白、visibility:hidden无效等常见问题。

绝对定位文字和图片底部对齐偏差源于img默认inline特性及基线对齐机制；应统一vertical-align、用transformtranslateY微调，并在图片尺寸不确定时优先采用flex布局或top:50%+translateY(-50%)实现稳定居中。

本文讲解如何通过纯CSS实现导航区域悬停时，同步控制覆盖层（overlay）的背景色、字体颜色及垂直偏移，避免JavaScript依赖，修复z-index、选择器作用域和定位失效等常见问题。

本文介绍如何利用CSSFlexbox的align-items:stretch特性，让左右固定宽高容器（如菜单按钮和头像）自动跟随居中图像的动态高度变化，实现响应式垂直对齐，全程无需JavaScript。