如何调整CSS使Popup容器的箭头与容器处于同一层级？

我想要制作带顶部箭头的弹出容器，目标效果是箭头与容器主体处于同一层级（视觉连贯、无遮挡），但实际显示中箭头和容器出现层级错位的问题。

现有代码 #

HTML

<div class="popup-container arrow-top"></div>

CSS

.popup-container {
    display: none;
    padding: 20px 10px 0 0;
    position: absolute;
    margin: 0 auto;
    z-index: 999;
    top: 100%;
    right: 50%;
    border-radius: 10px 0px 10px 10px;
    background-color: #FFFFFF;
    box-shadow: rgba(170, 170, 170, 0.6) 0 1px 14px
}

.popup-container:before {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(90deg) skewX(45deg) scaleY(cos(45deg));
  box-shadow: 0 1px 14px rgba(0,0,0,.2);
  background-color: #FFFFFF;
  position: absolute;
  z-index: 999;
}
.popup-co`ntainer.arrow-top:before {
  right: -3px;
  top: -4px;
}

修复方案 #

问题核心在于伪元素的z-index设置和代码拼写错误，调整步骤如下：

1. 移除伪元素的z-index：绝对定位的伪元素默认依附于父元素，父元素设置z-index后，伪元素会自动继承同一层级，无需额外设置z-index，避免层级冲突。
2. 统一阴影参数：让伪元素的阴影和容器阴影保持一致，消除视觉上的层级割裂感。
3. 修正代码拼写错误：原代码中.popup-container的拼写错误会导致箭头样式失效，需修正为.popup-container`。

调整后的CSS：

.popup-container {
    display: none;
    padding: 20px 10px 0 0;
    position: absolute;
    margin: 0 auto;
    z-index: 999;
    top: 100%;
    right: 50%;
    border-radius: 10px 0px 10px 10px;
    background-color: #FFFFFF;
    box-shadow: rgba(170, 170, 170, 0.6) 0 1px 14px;
}

.popup-container:before {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(90deg) skewX(45deg) scaleY(cos(45deg));
  box-shadow: rgba(170, 170, 170, 0.6) 0 1px 14px;
  background-color: #FFFFFF;
  position: absolute;
}
.popup-container.arrow-top:before {
  right: -3px;
  top: -4px;
}

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