如何解决模态弹窗(modal popup)被.btn文本覆盖的问题？

点击按钮弹出模态框后，按钮文本（红色标注区域）显示在模态框之上，已尝试设置z-index和position: relative但未生效。

问题分析 #

你的模态框（.lightbox-window）和按钮（.btn）处于同一个父容器（.party）中，虽然模态框使用了position: fixed和z-index: 999，但可能存在以下原因导致层级异常：

• 父容器的样式间接干扰了堆叠上下文
• 按钮的z-index: 0 !important可能与其他隐性样式冲突
• 模态框的堆叠优先级被同层级元素覆盖

解决方案 #

方案1：强制提升模态框层级 #

给.lightbox-window的z-index添加!important，确保它的层级优先级高于按钮：

.lightbox-window {
  position: fixed;
  background-color: rgba(50, 50, 50, 0.95);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999 !important; /* 提升层级并强制生效 */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  /* 其他原有样式保持不变 */
}

方案2：分离模态框与按钮容器 #

将模态框从.party容器中移出，直接放在<body>标签下，避免共享父容器带来的堆叠上下文冲突：

<body>
  <!-- 按钮容器 -->
  <div class="party">
    <a class="btn" href="#open-lightbox">PARTY</a>
  </div>

  <!-- 模态框单独放置 -->
  <div id="open-lightbox" class="lightbox-window">
    <div class="lightbox">
      <span class="image">
        <img src="https://static1.squarespace.com/static/64fc2b1002c42359825bbc03/t/66ae1f204ee13330597a3dcc/1722687270723/Untitled-3.png"/>
      </span>
      <a href="#void" title="Close" class="lightbox-close">X</a>
      <h3>PARTY</h3>
      <div class="paragraph">Enjoy the best party scenes Africa has to offer. Everything from unforgettable night outs, to the hottest boozy brunches, Kampala has it all.</div>
      <a class="btn2" href="https://www.oliwatravel.com/book-now">BOOK NOW</a>
      <br>
    </div>
  </div>
</body>

方案3：移除按钮冗余的z-index设置 #

按钮的z-index: 0 !important属于冗余设置，移除后可避免不必要的层级干扰：

.btn {
  font-family: "Bebas Neue", sans-serif;
  background-color: transparent !important;
  color: #fff;
  font-size: 47px;
  text-align: center;
  text-decoration: none;
  font-weight: 300;
  border-width: 0px !important;
  border-style: none !important;
  transition: none !important;
  position: relative;
  display: inline-block;
  /* 移除 z-index: 0 !important; */
  padding: 0.96rem 8.29rem;
  &:hover {
    color: white;
  }
}

效果验证 #

应用上述任意方案后，模态框弹出时会覆盖按钮文本，恢复正常的层级关系。

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