Div HTML 元素隐藏在图像后面答案

【问题标题】：Div HTML element is hiding behind an ImageDiv HTML 元素隐藏在图像后面
【发布时间】：2021-10-19 16:47:56
【问题描述】：

实际上，我使用 HTML 和 CSS 创建了一个图像滑块。我想创建一个弹出框。因此，在添加功能之前，我为它创建了一个布局并尝试使其居中。所以当我写 position:relative;底部：300px（或其他）它会上升但隐藏在图像滑块后面。

.popup{
    width: 900px;
    height: 500px;
    background-color: white;
    border: 5px solid black;
    position: relative;
    bottom:0px;
}

    <div id="slider">
        <figure>
            <img  src="img3.jpg">
            <img src="3.JPG">
            <img src="4.JPG">
            <img src="img3.jpg">
            <img src="9.jpg" alt="">
        </figure>
    </div>    

<center>
    <div class="popup">
    Dummy Text
</div>
</center>

【问题讨论】：

标签： html css image popup slider

【解决方案1】：

使用 z-index 指定您想要在顶部的元素：

https://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

【解决方案2】：

只需使用绝对设置您的位置。

.box .text{
    position: absolute;
}

演示jsFiddle

【讨论】：