如何实现CSS overflow属性反向效果？透明头部子菜单滑入隐藏问题

我正在制作一个带有透明背景（如rgba(0,0,0,0.8)）的固定header，点击汉堡菜单时需显示子菜单，需求是为子菜单添加滑入效果——使其从header后方平移至完全可见。但由于header存在一定透明度，子菜单在header后方时会被看到，不清楚如何实现子菜单在header后方时隐藏、移出header后可见的效果。

这里提供3种可行的实现思路：

方法1：使用clip-path裁剪子菜单 #

给header添加clip-path属性，限定header只显示自身的矩形区域。这样位于header后方的子菜单会被裁剪掉，只有当子菜单移出header范围时才会显示。这种方法无需调整z-index，性能优异且无需额外DOM元素。

方法2：添加内部遮罩层 #

在header内部新增一个与header尺寸完全一致的遮罩div，背景色与header相同，将其z-index设为介于子菜单和header内容之间。遮罩层会挡住后方的子菜单，同时保持header的整体透明效果。

方法3：利用overflow: hidden #

将header的overflow属性设置为hidden，子菜单初始位置位于header内部（如top:0），平移时移出header范围。这样子菜单在header内部的部分会被隐藏，移出后自动显示。需注意子菜单必须是header的直接子元素。

CSS #

body {
  padding: 0;
  margin: 0;
}

.header {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  max-width: 100vw;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4em;
  z-index: 1000;
  /* 裁剪出header的显示区域，超出部分隐藏 */
  clip-path: inset(0 0 0 0);
}

.header p {
  color: white;
  z-index: 750;
  cursor: pointer;
}

.submenu {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.8);
  transition: transform 1s linear;
  z-index: 0;
}

.submenu ul {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  color: white;
  margin: 0;
  padding: 1em;
}

/* 初始状态：子菜单位于header后方 */
.submenu {
  transform: translateY(0);
}

/* hover时子菜单向下滑出header */
.header p:hover ~ .submenu {
  transform: translateY(100px);
}

HTML #

<div class="header">
  <p>Hover me!</p>
  <div class="submenu">
    <ul>
      <li>Lien</li>
      <li>Lien</li>
      <li>Lien</li>
    </ul>
  </div>
</div>

HTML #

<div class="header">
  <!-- 新增遮罩层 -->
  <div class="header-mask"></div>
  <p>Hover me!</p>
  <div class="submenu">
    <ul>
      <li>Lien</li>
      <li>Lien</li>
      <li>Lien</li>
    </ul>
  </div>
</div>

CSS（在原基础上新增） #

.header-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 500; /* 高于子菜单，低于header内容 */
}

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