为何fixed定位的socials-container被relative定位的profile-container遮挡？

HTML关键元素包括section#landing、profile-container和socials-container，CSS设置如下：

• profile-container：position: relative
• socials-container：position: fixed

出现的问题：

• 滚动至section#landing区域时，无法点击socials-container
• 滚动到section#about区域则可正常点击
• 给profile-container设置背景色后，确认socials-container被section#landing遮挡

请问这是什么原因？

核心问题出在CSS层叠上下文的优先级：

1. 当元素设置position: relative（非static定位）时，会自动创建一个层叠上下文。section#landing内部的profile-container使用了relative定位，这会让section#landing或profile-container形成的层叠上下文，默认层级高于基于根元素（<html>）定位的fixed元素。
2. fixed定位元素的层级原本是相对于根元素的，但如果页面中存在其他创建了层叠上下文的元素（比如这里的profile-container），且没有设置z-index调整优先级，fixed元素就会被压在下方，导致无法触发点击交互。
3. 滚动到section#about区域时，section#landing的内容不再覆盖在socials-container上方，所以交互恢复正常。

解决方法 #

• 给socials-container设置一个足够高的z-index值，确保它的层级高于section#landing内的元素：

  .socials-container {
    position: fixed;
    z-index: 999;
  }
  

• 检查section#landing或profile-container是否有继承或额外的z-index设置，保证socials-container的z-index数值更高，就能让它始终显示在最上层。

内容的提问来源于stack exchange，提问作者Mig Rivera Cueva