覆盖HTML/CSS背后的内容

我正在尝试为布局创建一个英雄部分。我的问题是，即使在设置了更高的z索引值之后，内容（文本和按钮）仍被覆盖层遮挡

这是我的密码：

@导入url（'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0，700；0900；1300；1400；1700；1900&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
/*重置*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
/*基本样式*/
：根{
--原色：#c72727；
--次要颜色：#f99500；
--浅色：#F3；
--深色：#333；
--最大宽度：1100px；
}
身体{
字体系列：“Lato”，无衬线；
线高：1.5；
背景：var（--浅色）；
}
img{
宽度：100%；
高度：自动；
}
保险商实验室{
列表样式：无；
}
a{
文字装饰：无；
颜色：#777；
}
i、 晶圆厂{
颜色：#777；
}
p{
字号：100；
保证金：1rem 0；
}
h1，
h2，
h3，
h4，
h5，
h6{
字体系列：“statliches”，草书；
边缘底部：0.55雷姆；
线高：1.3；
保证金：0.5雷姆0；
}
/*公用事业*/
.集装箱{
最大宽度：var（--最大宽度）；
保证金：自动；
填充：20px；
}
.btn{
显示：内联块；
光标：指针；
填充：13px 20px；
颜色：#fff；
}
.btn小学，
.bg小学{
背景：var（--原色）；
}
.btn中学，
.bg中学{
背景：var（--二次色）；
}
.btn暗，
.bg暗{
背景：var（--深色）；
}
.bg灯{
背景：var（--浅色）；
}
.类别{
颜色：#fff；
文本转换：大写；
边界半径：50%；
填充：10px；
字体大小：10px；
}
.类别运动{
背景：var（--二次色）；
}
.娱乐类{
背景：#a66bbe；
}
.类别技术{
背景：#009cff；
}
/*标题*/
#标题{
位置：粘性；
排名：0；
左：0；
右：0；
}
#标题.容器{
显示：网格；
网格模板柱：6fr 3fr 2fr；
对齐项目：居中；
}
#标题。标志{
宽度：180px；
}
#标题ul{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#标题ulli{
右边距：10px；
}
/*展示*/
#展示{
高度：500px；
颜色：#fff；
背景：url（'../images/featured.jpg'）无重复中心/封面；
位置：相对位置；
}
#showcase：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
}
#展示*{
z指数：10000；
}

NewsGrid |领先的在线新闻网站






体育
一些体育用品

Lorem ipsum dolor sit amet，奉献精英。占有
对动物的赞美之道，应该用它来表达。
作为一名智者，我们需要一份临时的工作
托塔姆。多洛，西科！

#showcase*{z-index:10000；position:relative；}

放置position

relative

。就我所知，要使z-index工作，您需要有

static

以外的位置，默认情况下，位置是

static

是的，您是对的。它可以在定位元素上工作，也可以在使用display:flex时工作，在这种情况下，不需要添加position:relative。这就解释了！为帮助干杯：）