html - Div HTML element is hiding behind an Image

Question

Actually I I created an Image Slider using HTML and CSS. And I wanted to create a popup box. So before adding the functonality I created a layout for it and tried to make it in center. So when I write position:relative; bottom:300px(or whatever)it goes up but hides behind the image Slider.

.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>

标签： htmlcssimagepopupslider

Answer 1

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

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