Css 光滑的滑块覆盖了下面的元素

我的光滑的滑块图片掩盖了应该放在下面的元素，我不知道为什么。我需要

#功能

坐在

#幻灯片

下面，但现在它被掩盖了。我不确定是什么使滑块在页面上与它下面的元素重叠。我不想仅仅用CSS“推”下

#功能，比如使用
bottom:-50px
或其他什么，因为我的目标是响应性设计。我需要的幻灯片滑块和幻灯片采取同样的高度，图像做。希望这是有意义的！这是我的密码：

HTML:

我发现了两个问题-

使用高度：50%代替高度：50%。（参考线-19）。这会解决你的问题
用父div包装所有幻灯片图片。将其命名为-class='slick'（参考线-53）。这个.slick类将迭代所有图片。如果您的滑块运行良好，则不必执行此部分
我已附上下面的代码-



辅导的
/*幻灯片放映*/
#幻灯片放映{
宽度：100%；
身高：50%；
边缘底部：5vh；
}
.幻灯片{
宽度：100%；
身高：100%；
}
.幻灯片图像{
宽度：100%；
}
.光滑的轨道.光滑的轨道{
显示器：flex；
对齐项目：居中；
}
/*特征*/
#特写组{
利润率：5vw；
垫底：5vh；
字体大小：粗体；
字体大小：2.5vh；
字母间距：.25vw；
边框底部：1px纯白；
}
保险柜
保护
24小时访问
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

$（文档）.ready（（）=>{
$（'#slideshow.slick'）。slick({
自动播放：对，
自动播放速度：500、//自动播放速度：1000或自动播放速度：2000，
点：是的，
});
});
$（文档）.ready（（）=>{
$（'#userReview.slick'）.slick({
自动播放：对，
自动播放速度：8000，
点：是的，
});
});

<div id="slideshow">
    <div class="slide"><img src="images/Need Space.jpg"></div>
    <div class="slide"><img src="images/Open Lot.jpg"></div>
    <div class="slide"><img src="images/IMG_0713a.jpg"></div>
    <div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
    <div>Safe</div>
    <div>Secure</div>
    <div>24-Hour Access</div>
</div>
<div id="description">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

    /* SLIDESHOW */
#slideshow {
  width: 100%;
  height: 50vh;
  margin-bottom: 5vh;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
}

.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

/* FEATURES */
#features div {
  margin: 5vw;
  padding-bottom: .5vh;
  font-weight: bolder;
  font-size: 2.5vh;
  letter-spacing: .25vw;
  border-bottom: 1px solid white;
}