Web开发新手求助：CSS设置z-index无效，如何将Logo置于前端

我看了你的代码，问题出在**堆叠上下文（stacking context）**的层级上。虽然你给.logo设置了z-index:1，但它的父元素<nav>是position:sticky且没有设置z-index——这意味着<nav>本身的堆叠层级和.info是同一级的，而.info是position:absolute，会默认覆盖在静态定位的元素上面，所以.logo的z-index只能在<nav>内部生效，无法突破到.info的上层。

这里有两个简单的修复方案：

方案一：给<nav>设置定位和更高的z-index #

修改你的CSS中nav的样式：

nav{ 
  position: relative; /* 也可以保留sticky，但必须搭配z-index */
  z-index: 10; /* 只要比.info的z-index（0）大即可 */
}

这时可以把.logo的z-index去掉，因为<nav>已经处于.info的上层，内部的.logo自然也会显示在最前面。

方案二：把.info的z-index设为负数 #

如果不想修改<nav>的定位，也可以直接让.info处于默认堆叠上下文的底层：

.info{ 
  z-index: -1; /* 负数会让它自动排在非定位元素的下方 */
  width: 60vw; 
  height: 140vh; 
  position: absolute; 
  top: 50%; 
  left: -10%; 
  transform: translateY(-50%); 
}

这个方案更简洁，你的当前代码里没有其他负数z-index元素，所以不会有冲突。

测试一下，不管用哪个方案，你的LOGO都会显示在.info和#circle的前面了。另外提个小建议：position:sticky在没设置top/bottom等偏移值时，行为和static差不多，如果你真的需要粘性导航，记得加上top:0这类属性哦。

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