<div> following a responsive Image

Issue

and thank you for your time in advance!

I am working on a site (here): https://www.flighteducation.co.uk/Panelcraft/index.php

The HTML is:

<div class="w3-content w3-section">
<div class="static">
<img src="img/Head Plain.webp">
</div>
<div class="fade">
<img class="mySlides w3-animate-fading" src="img/Head Logo.webp">
<img class="mySlides w3-animate-fading" src="img/Head Round.webp">
<img class="mySlides w3-animate-fading" src="img/Head Square.webp">
</div>
</div>

The top cross-fading images are responsive to the page width with the CSS code (both .fade and .static) being:

.fade{
position: absolute;
left: 0;
top: 179px;
}

.fade img{
width: 100%;
}

"How can I write more code after the image that sticks to the bottom of it?"

Am finding myself popping a huge position: relative number after it to get it below, and then of course when the screen width shrinks...the following item stays still vertically.

I understand this is quite a simple question...but I'm stumped!

Thanks again.

Solution

You better not use position: absolute;

And top: 10vh; is a better use than top: 120px; because the vh is screen relative, and for me easier to handle.

If this image is the only element in this div, wouldn't it be easier to put the image as a background for this div ?

Answered By - Shachar297