侧边滑出导航半透明背景无法覆盖居中Logo问题求助

问题根源 #

你遇到的问题核心是：body的背景色属于元素自身的背景层，页面内所有子元素（包括你的Logo图片）都会渲染在这个背景之上，所以给Logo设置z-index: -1不会生效——因为z-index仅对设置了position（非static）的元素生效，而且即使生效，子元素的层级是相对于父元素的，永远会在父元素背景的上方。

解决方案：添加独立遮罩层（推荐） #

最可靠的方式是创建一个独立的全屏遮罩元素，默认隐藏，当侧边导航开启时显示，让它覆盖在所有内容之上（除了侧边导航）。

修改后的完整代码：

HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- 添加遮罩层 -->
<div id="overlay" class="overlay"></div>
<img src="assets/images/logo2.png" class="myBrand">
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

CSS

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  margin: 0; /* 去掉默认margin，避免遮罩出现缝隙 */
}

.myBrand {
  margin-left:50%;
  /* 不需要设置z-index */
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100; /* 提高侧边导航层级，确保在遮罩之上 */
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 50; /* 层级在内容之上，侧边导航之下 */
  display: none; /* 默认隐藏 */
  transition: opacity 0.5s;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

JavaScript

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  // 显示遮罩层，不再修改body背景
  document.getElementById("overlay").style.display = "block";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  // 隐藏遮罩层
  document.getElementById("overlay").style.display = "none";
}

关键修改说明 #

1. 新增overlay遮罩元素，固定定位覆盖全屏，默认隐藏
2. 调整侧边导航的z-index:100，确保它在遮罩层之上
3. 移除对body背景色的修改，改为控制遮罩层的显示/隐藏
4. 去掉了Logo上无效的z-index设置

替代方案（不新增元素） #

如果不想添加新元素，也可以给Logo设置position: relative并将z-index设为-1，但需要确保页面其他元素的定位和层级不会冲突：

.myBrand {
  position: relative;
  z-index: -1;
  margin-left:50%;
}

不过这个方案依赖于父元素（body）没有设置position，兼容性和稳定性不如独立遮罩层，优先推荐第一种方法。

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