How can I overlay an image gallery on the section below, without it overlapping the content when minimizing the browser in height?

I have a website where I'm trying to display an image gallery on top of the section below it. The upper section contains a div blog with text and a div block with a small image gallery. I want the image gallery to overlay the section below it, but I'm having trouble preventing it from overlapping the content of the second section when the browser height is minimized.

Can someone please help me find a solution to position the image gallery on top of the section below without overlap, while keeping it responsive? Any help would be greatly appreciated

Thats a screeenshot of the Design

I've tried setting the image gallery position to absolute and the section below to relative, but this doesn't seem to work for me. When I set the image gallery to relative, it overlays on the content of the section below, and when I set it to absolute, it overlaps the content of the div with the text and image gallery. I'm also using media queries to make the website responsive, but I'm not sure how to adjust the positioning of the image gallery accordingly.

Solution

This approach should allow you to overlay the image gallery on the section below without overlapping the content when the browser height is minimized. You may need to adjust the padding, margins, and media query breakpoint to fit your specific design requirements.

Here's a basic example using Flexbox:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    position: relative;
}

.text-content {
    padding: 20px;
    background-color: #ef9999;
}

.gallery {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.section-below {
    padding: 20px;
    background-color: #d0d0d0;
    min-height: 200px; /* Adjust this value according to your content */
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .container {
        flex-direction: row;
    }

    .gallery {
        position: static;
        background-color: transparent;
        padding: 0;
        margin-left: 20px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery Overlay</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="text-content">
            <p>Your text content goes here...</p>
        </div>
        <div class="gallery">
            <!-- Your image gallery goes here -->
        </div>
    </div>
    <section class="section-below">
        <!-- Content of the section below goes here -->
    </section>
</body>
</html>