菜单栏与内容重叠

Question

每当我在手机屏幕上打开我的菜单栏时，它的大小与内容重叠，但这种情况只发生在主页上的产品页面上，它不会与内容重叠，产品卡片上也没有Z索引

menu-bar overlapping 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>

Answer 1

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

1. 您的产品卡(它们的子代)有一个z索引索引，这意味着它只是比菜单的z索引更大。
2. 您的菜单位于parent中，其z索引比菜单本身更小。在这种情况下，您会遇到索引问题，因此您的菜单z- stacking context实际上不是9999 (所以它比卡片z-index小)