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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use z-index to specify the element you want on top:

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

CodePudding user response：

Simply set your position with absolute.

.box .text{
    position: absolute;
}

Demo jsFiddle