Как расположить картинки в Bootstrap4 чтобы одна была поверх другой?

Question

[Ray S]

<div class="container-fluid">
        <div class="row">

            <div class="col-3">
                <a class="menu" href="#"><img src="img/menu-button-of-three-horizontal-lines.svg" alt="menu"
                        width="30px" height="25px"></a>
            </div>


            <div class="col-6 d-flex justify-content-center">
                <span class="story">STORY</span>
            </div>

            <div class="col-5">
                <div class="travel__story">
                    <span>TRAVEL</span>
                    <h1>Nullam id dolor id nibh ultricies vehicula ut id elit. </h1>
                    <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec id elit
                        non mi porta gravida at eget metus. </p>

                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac,
                        vestibulum at eros.</p>

                        <button>FULL STORY</button>
                </div>
            </div>


            <div class="img__mountain">
                <img src="img/kawah-ijen-volcano.png" width="500px">
            </div>

          <div class="img__water">
              <img src="img/leo-rivas-OR_3rbIv5yI-unsplash.jpg" width="300px">
          </div>

Вот код. Последняя картинка появляется с новой строки, а нужно чтобы она была поверх img__mountain

Answer 1

[origami1024]

1) Положи обе картинки во враппер, врапперу добавь класс position-relative.
2) Обеим картинкам добавь класс position-absolute.

https://codepen.io/origami1024/pen/KKPmQzb

Comments

[Ray S]

спасибо, только получилось, что img__mountain оказалась поверх нужной картинки
подскажите как сделать наборот))

[origami1024]

добавь и второй картинке position-absolute

[origami1024]

Если картинок больше, то нужно через z-index ставить - что будет сверху

[Ray S]

origami1024, спасибо огромное)