如何使这个绝对html标记出现在相对标记前面？

有人能告诉我如何让弹出窗口出现在标题上方吗

为什么这个html标记隐藏在标题标记下

我尝试过使用z-index，但没有成功

函数revealPopup（id）{
文件
.getElementById（id）
.班级名单
.切换（“显示”）；
}

.header{
z指数：1；
背景颜色：黄色；
字体系列：“Segoe UI”，无衬线；
}
.聊天{
z指数：2；
位置：相对位置；
左侧填充：14px；
右边填充：14px；
溢出x：隐藏；
溢出y：自动；
}
.线路{
z指数：3；
填充顶部：10px；
右边填充：0px；
左侧填充：16px；
显示器：flex；
对齐内容：居中对齐；
证明内容：柔性端；
文本对齐：左对齐；
能见度：可见；
}
.泡泡{
z指数：4；
背景：#ff0000；
flex:01自动；
最小宽度：0；
字体大小：14px；
线高：18px；
位置：相对位置；
文本对齐：左对齐；
填充：6px 9px；
边界半径：6px；
过渡：框阴影2s；
}
/*实际弹出窗口*/
流行语{
z指数：5；
可见性：隐藏；
宽度：160px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
底部：125%；
左：20%；
左边距：-80px；
}
/*弹出箭头*/
.popuptext:：之后{
内容：“；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：#555透明；
}
/*切换此类-隐藏并显示弹出窗口*/
.popuptext.show{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s；
}
/*添加动画（在弹出窗口中淡入淡出）*/
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

标题
一个简单的弹出窗口！
点击我
一个简单的弹出窗口！
点击我

.bubble

是

位置：相对的

，因此它创建了一个新的堆叠上下文。由于

.popuptext

位于

.bubble

内，因此您在其上设置的z索引与

.bubble

有关

您需要在

.bubble

上设置

z-index

（因为它与

.header

共享堆叠上下文）。

找到它

溢出阻止它逃逸

.chat

.chat {
    ...
    overflow-x: hidden;
    overflow-y: auto;
    ...
}

---

HTML有一个非常好的

元素。没有必要用类名伪造一个。设置z索引无助于它的工作：（我做错什么了吗？