我的导航栏没有与我的英雄部分重叠

Posted 2023-02-22

【中文标题】我的导航栏没有与我的英雄部分重叠

【英文标题】：My navbar is not overlapping my hero section

【发布时间】：2021-07-15 07:01:09

【问题描述】：

我正在为我的大学制作一个网站。我希望导航栏与英雄部分重叠。我已将 glassmorphism 趋势应用于我的 navbar ，因此我将 navbar 设置为粘性并将其设置为 z-index:1000 和我的英雄部分 z-index:-1000 。但是我也在导航栏后面得到了这个空白（如屏幕截图所示），为什么？

我正在使用 Reactjs 和 SASS。我在下面证明我的代码：- Navbar.js:-

import React from "react";
import logo from "../../../assets/GNITLogo.jpg";
function NavBar() 
  return (
    <nav>
      <img src=logo  />
      <div>
        <a href="#">Home</a>
        <a href="#">Login</a>
        <a href="#">Contact Us</a>
      </div>
    </nav>
  );


export default NavBar;

Hero.js（英雄部分）：-

    import React from 'react'

function Hero() 
      return (
            <div className="Hero">
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem itaque eveniet minus ullam illum nemo ipsa incidunt cum? Dignissimos modi amet blanditiis asperiores? Natus modi sint explicabo accusamus blanditiis, voluptas ut provident aliquid enim?</p>
            </div>
      )


export default Hero

_navbar.scss :-

nav 
  display: flex;
  flex-direction: row;
  align-items: center;
  position: sticky;
  z-index: 1000;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.4);
  img 
    height: 5.35rem;
    width: 13rem;
    object-fit: contain;
    margin-left: 2rem;
  
  a 
    text-decoration: none;
    color: black;
    margin-right: 3rem;
  
  div 
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
  

_hero.scss :-

.Hero
      width: 100vw;
      height: 100vh;
      background-color: #FFEB94;
      z-index: -1000;

我在互联网上搜索过这个问题。大多数答案都有使用 z-index 的解决方案，但我不知道为什么 z-index 在我的情况下不起作用。

任何人都知道如何从导航栏中删除白色背景并具有英雄部分的颜色。

【问题讨论】：

@battaboombattabaam 。我尝试过这个 。但它没有用

你试过absolute或fixed吗？

@battaboombattabaam 固定工作。

@battaboombattabaam 顺便说一句，你能告诉我为什么 fixed 被移除了白色背景而 sticky 没有？

【参考方案1】：

[![

nav 
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1000;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: transparent;
  position: fixed;
  left: 20px;
  right:20px;
  img 
    height: 5.35rem;
    width: 13rem;
    object-fit: contain;
    margin-left: 2rem;
  
  a 
    text-decoration: none;
    color: black;
    margin-right: 3rem;
  
  div 
    margin-left: auto;
    font-weight: bold;
    font-size: 1.3rem;
  


.Hero 
  width: 100vw;
  height: 100vh;
  background-color: #FFEB94;
  z-index: -1000;
  p 
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
  

【讨论】：

O...这么简单的解决方案?。我怎么了。无论如何，谢谢哥们