HTML/CSS Dropdown Menu被H1遮挡，如何设置使其显示在前方？

• 问题根源：下拉菜单的父容器（导航所在的<header>）未建立独立堆叠上下文，导致你设置的z-index无法生效，Hero区域的<h1>所在容器反而形成了更高的堆叠层级。
• 直接修复步骤：
  1. 给<header>元素添加以下CSS样式：

     header {
       position: relative;
       z-index: 999;
     }
     

  2. 无需调整<h1>的z-index，也不用修改下拉菜单本身的z-index，只要保证<header>的堆叠层级高于Hero区域即可。
• 原理说明：当元素设置非static的position属性并指定z-index时，会创建独立的堆叠上下文，该上下文内的子元素（包括下拉菜单）会基于这个层级进行堆叠，不会被外部更低层级的元素遮挡。

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