Блог

На самом деле я создал слайдер изображений с использованием HTML и CSS. И я хотел создать всплывающее окно. Поэтому, прежде чем добавить функциональность, я создал для нее макет и попытался сделать его в центре. Поэтому, когда я пишу положение:относительное; внизу:300 пикселей(или что-то еще), оно поднимается, но скрывается за ползунком изображения.

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

Используйте z-индекс, чтобы указать нужный элемент сверху:

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

Просто установите свою позицию с помощью absolute.

 .box .text{
    position: absolute;
}
 

Демонстрационный jsFiddle