<div> following a responsive Image-CodePudding

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 >
<div >
<img src="img/Head Plain.webp">
</div>
<div >
<img  src="img/Head Logo.webp">
<img  src="img/Head Round.webp">
<img  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.

CodePudding user response：

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 ?

CodePudding user response：

Simply don't use position: absolute; – it takes the element out of the document flow, with the effect you are experiencing.