时间戳

首页 > 解决方案 > 菜单栏与内容重叠

html - 菜单栏与内容重叠

问题描述

当我以移动屏幕大小打开菜单栏时，它会与内容重叠，但这仅发生在主页上的产品页面上，它不会与内容重叠产品卡上没有 Z 索引

菜单栏重叠 img

这是菜单栏的CSS

CSS代码

 @media (max-width: 768px) {
  #menu-bar {
    display: initial;
    z-index: 9999;
  }

#menu-bar {
  font-size: 2rem;
  border-radius: 0.5rem;
  border: 0.1rem solid var(--black);
  padding: 0.8rem 1.5rem;
  color: var(--black);
  cursor: pointer;
  display: none;
}

javascript代码：

    let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let header = document.querySelector('.header-2');

menu.addEventListener('click', () => {
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
});

window.onscroll = () => {
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');

    if (window.scrollY > 150) {
        header.classList.add('active');
    } else {
        header.classList.remove('active');
    }

}

HTML 代码：

<div class="header-2">
        <div id="menu-bar" class="fas fa-bars"></div>

        <nav class="navbar">
          <a href="index.html">home</a>
          <a href="#product">products</a>
          <a href="#category">Category</a>
          <a href="about.html">about</a>
          <a href="#contact">contact</a>
        </nav>

        <div class="icons">
          <a href="login.html">Login</a>
          <a href="#" class="fas fa-user-circle"></a>
        </div>
      </div>

标签： htmlcss

解决方案

您没有提供足够的代码，所以我只能猜测。这绝对是一个 z-index 问题，可能的原因是：

  1. 您的产品卡片（它们的子项）的 z-index >=9999，这意味着它仅比菜单 z-index 大。
  2. 您的菜单位于 parent 中，其 z-index 比菜单本身的小。在这种情况下，你有一个堆叠上下文问题，所以你的菜单 z-index 实际上不是 9999（所以它比卡片 z-index 小）

推荐阅读