如何让#icon显示在#dropdown下方？position:fixed父元素堆叠上下文问题

问题背景 #

在示例场景中，#container的position: fixed属性为其子元素创建了新的堆叠上下文，导致#dropdown无法正常显示在#icon上方。需严格满足以下要求：

• #icon必须设置position: absolute
• #container必须设置position: fixed
• #dropdown必须作为#container的子元素
• #dropdown必须设置position: absolute
  寻求纯CSS解决方案。

示例效果示意图：

核心原理 #

position: fixed的元素会创建独立的堆叠上下文，其子元素的堆叠层级仅在该上下文内部生效。要让#dropdown（容器子元素）显示在#icon上方，关键是调整#container与#icon的堆叠层级关系，让容器的整体层级高于#icon。

纯CSS实现方案 #

1. 给#container设置明确的正z-index值，确保其堆叠层级高于#icon：

#container {
  position: fixed;
  z-index: 1;
  /* 保留原有样式 */
}

2. 给#icon设置低于容器的z-index值（可设为0或负数）：

#icon {
  position: absolute;
  z-index: 0;
  /* 保留原有样式 */
}

3. 若#container内部还有其他元素与#dropdown竞争堆叠层级，可给#dropdown设置更高的z-index（在容器的堆叠上下文内生效）：

#dropdown {
  position: absolute;
  z-index: 2;
  /* 保留原有样式 */
}

方案说明 #

• 由于#container是fixed定位，设置z-index后会成为独立的堆叠上下文，其内部的#dropdown会继承这个上下文的层级优先级，只要容器的z-index高于#icon，#dropdown自然会显示在#icon上方。
• 完全遵循所有给定要求，无需修改任何元素的position属性。

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