设置position:relative与top样式后Div无法正常重叠的问题

问题原因 #

核心问题是堆叠上下文冲突：

• .containerham 设置了 transform: translateY(-100%)，根据CSS规则，任何非none的transform属性都会为元素创建独立的堆叠上下文。这导致它的z-index: 100仅在自身上下文内生效，无法和外部的.headdingtextcon层级正常比较。
• 加上.headdingtextcon通过top: -5rem向上偏移，最终出现文本容器覆盖导航栏的反向效果。

解决方案 #

以下是几种可行的修复方式：

方法1：移除transform改用top定位（保留relative） #

把导航栏的初始隐藏方式从transform改为top，避免创建额外堆叠上下文，让z-index正常生效：

.containerham{
    width: 100%;
    height: max-content;
    /* 替换transform为top */
    top: -100%;
    position: relative !important;
    z-index: 100 !important;
    border-bottom: 1px solid grey;
}

同时调整动画代码，将keyframes里的transform改为top：

/* 修改slideInDown动画 */
@-webkit-keyframes slideInDown {
    0% {
        top: -100%;
        visibility: visible;
    }
    100% {
        top: 0;
    }
}
@keyframes slideInDown {
    0% {
        top: -100%;
        visibility: visible;
    }
    100% {
        top: 0;
    }
}

/* 修改slideOutUp动画 */
@-webkit-keyframes slideOutUp {
    0% {
        top: 0;
    }
    100% {
        visibility: hidden;
        top: -100%;
    }
}
@keyframes slideOutUp {
    0% {
        top: 0;
    }
    100% {
        visibility: hidden;
        top: -100%;
    }
}

方法2：将导航栏改为absolute定位 #

把.containerham的position改为absolute，让它脱离文档流，同时和文本容器处于同一堆叠上下文，z-index可直接控制层级：

.containerham{
    width: 100%;
    height: max-content;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    /* 改为absolute */
    position: absolute !important;
    z-index: 100 !important;
    border-bottom: 1px solid grey;
    /* 确保占满宽度 */
    left: 0;
}

这种方式不需要修改动画代码，transform动画可正常使用，且z-index会优先于文本容器生效。

方法3：给共同父元素创建统一堆叠上下文 #

如果需要保留两个元素的relative定位，给它们的共同父容器添加以下样式，让子元素在同一个堆叠上下文内比较层级：

/* 替换为实际的共同父元素类名 */
.parent-container{
    position: relative;
    z-index: 1;
}

这样.containerham的z-index:100会在父容器的上下文内生效，优先于.headdingtextcon的z-index:1。

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