如何利用z-index使导航栏内的Logo覆盖Header组件？

我已将导航栏（Navigation Bar）与Header拆分为两个独立的React组件，Logo位于导航栏中，希望通过z-index属性让Logo覆盖Header组件。当前显示效果为：左上角圆形Logo被米白色的Header区域遮挡。

Header组件代码 #

HTML结构 #

<div className="main-container-three">
    <div className="admin-container">
    <p className="admin-heading">The Oilixate Shop: Oil Spells</p>
    </div>
</div>

CSS样式 #

.main-container-three{
  position: relative;
  width: 1440px;
  height: 770px;
  left: 0px;
  top: 78px;
  background: #ECE8DF;
  z-index: 1;
  border-radius: 0px 0px 37px 37px;
}

导航栏组件代码 #

HTML结构 #

<div className="nav-bar">
    <div className="nav-logo"></div>
    <a href="/"><p className="nav-home">Home</p></a>
    <a href="/IndiProduct"><p className="nav-product">Products</p></a>
    <a href="/Checkout"><p className="nav-checkout">Checkout</p></a>
    <a href="/Admin"><p className="nav-admin">Admin</p></a>
    <input type="text" placeholder={'Search'} className="search-box"></input>
    <button className="search-btn"></button>
    <div className="shopping-cart">
        {/* <div className="modal"></div> */}
    </div>
    <div className="numb-items">
        <p className="one-item">1</p>
    </div>
</div>

CSS样式 #

.nav-bar{
  width: 100%;
  height: 82px;
  background: #2B4447;
  float: left;
}

.nav-logo{
  width: 80px;
  height: 80px;
  z-index: 2;
  margin-top: 27px;
  margin-left: 31px;
  background: grey;
  border-radius: 100%;
  float: left;
}

.nav-home{
  font-family: 'Inter';
  margin-top: 40px;
  margin-left: 324px;
  font-weight: 300;
  color: #DAEFDE;
  font-size: 20px;
  float: left;
}

.nav-home:hover{
  color: #FFFFFF;
}

.nav-product{
  font-family: 'Inter';
  margin-top: 40px;
  margin-left: 71px;
  font-weight: 300;
  color: #DAEFDE;
  font-size: 20px;
  float: left;
}

.nav-product:hover{
  color: #FFFFFF;
}

.nav-checkout{
  font-family: 'Inter';
  margin-top: 40px;
  margin-left: 71px;
  font-weight: 300;
  color: #DAEFDE;
  font-size: 20px;
  float: left;
}

.nav-checkout:hover{
  color: #FFFFFF;
}

.nav-admin{
  font-family: 'Inter';
  margin-top: 40px;
  margin-left: 71px;
  font-weight: 300;
  color: #DAEFDE;
  font-size: 20px;
  float: left;
}

.nav-admin:hover{
  color: #FFFFFF;
}

.search-box{
  width: 225px;
  height: 43px;
  margin-top: 29px;
  margin-left: 91px;
  padding-left: 1%;
  background: #ECE8DF;
  border: 1px solid #000000;
  border-radius: 8px;
  float: left;
}

::placeholder{
  color: #000000;
}

.search-btn{
  border-style: none;
  width: 36px;
  height: 35px;
  margin-top: 35px;
  margin-left: -41px;
  background: #EBA182;
  border-radius: 5px;
  background-image: url("../src/assets/Search.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  float: left;
}

.shopping-cart{
  width: 35px;
  height: 35px;
  margin-top: 33px;
  margin-left: 74px;
  background: #ECE8DF;
  background-image: url("../src/assets/Trolley.svg");
  background-repeat: no-repeat;
  background-position: 7px 10px;
  background-size: 20px 20px;
  border-radius: 6px;
  float: left;
}

z-index属性仅对非static定位的元素生效，当前.nav-logo的position默认是static，所以设置的z-index:2不会起作用。同时Header组件的.main-container-three设置了position:relative和z-index:1，会覆盖导航栏中未正确设置层级的元素。

你可以通过以下两种方式解决：

• 方案一：给导航栏整体设置定位和更高层级，确保导航栏所有内容都在Header上方
  修改.nav-bar的CSS：

.nav-bar{
  width: 100%;
  height: 82px;
  background: #2B4447;
  float: left;
  position: relative; /* 添加相对定位 */
  z-index: 2; /* 设置比Header更高的层级 */
}

• 方案二：仅给Logo添加定位，让它单独覆盖Header
  修改.nav-logo的CSS：

.nav-logo{
  width: 80px;
  height: 80px;
  z-index: 2;
  margin-top: 27px;
  margin-left: 31px;
  background: grey;
  border-radius: 100%;
  float: left;
  position: relative; /* 添加相对定位，让z-index生效 */
}

两种方案都能实现Logo覆盖Header的效果，推荐方案一，能确保导航栏整体层级统一，避免后续其他元素出现遮挡问题。

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