How to maintain alignment of an absolute item inside a changing flex-parent?-CodePudding

Basically, I have a few banners overtop of some images inside a flex-box. The images are aligned according to the CSS while the flexbox is in its flex-direction: row orientation, then they all bunch at the top and smother each other when the flex box switches to flex-direction: column.

<html>
    <div >
        <div >
            <img src="resources/images/norbert-toth-I1oL89qxefc-unsplash.jpg" />
            <div location ">
            <img src="resources/images/kristen-colada-adams-wpCJlKxCNRA-unsplash.jpg" />
            <div >
                <h2>Sunrise Botanical <br>(Downstairs)</h2>
                <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
            </div>
        </div>
        <div >
            <img src="resources/images/daria-volkova-_IhXaHmTJr8-unsplash.jpg" />
            <div >
                <h2>Black Cat Coffee</h2>
                <p>686 My Mind <br>Detroit, MI <br> 49448</p>
            </div>
        </div>
    </div>
</html>

Essentially with the added CSS, the banners with the class location-container don't change their orientation with the flex-box, and they display on top of one another only in the first parent.

Here's their CSS:

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: absolute;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
    }
}

It's expected that once the width of the webpage reaches 1200px, the flex-box will change orientation to direction: column, and the text containers will stay in their relative places.

Is there any way to keep the banners in their proper locations when the parent containers flex?

CodePudding user response：

In your media 1200px you are still using position:absolute. You need to set it location-container class to relative once you are in that viewport. Also you need to add min-width to it so that each location-container is equal.

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: relative;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
        min-width:300px;
    }
}

<div >
    <div >
        <div >
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
    </div>
    <div >
        <div >
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>
    <div >
        <div >
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

CodePudding user response：

It may not be true for your original code, but the first <div in the class attribute. That will get in the way and need to be corrected (done in the snippet).

You made the absolute positioned location-container relative to .locations with ending s, but they should be relative to .location without the s.

remove position: relative from .locations
add .location { position: relative } to your CSS

And you're good to go.

BTW, I did noting about overflowing .location content, but added some nice random pictures to show the effect.

UPDATE after looking deeper into your code I noticed that all but flexbox .locations { flex-direction: column } is different. There is no need to define the other properties a second time.

Rule of thumb:

define all properties outside a media query that stay the same for each device.
inside a media query override only the properties that need to be changed and/or add new ones. In this case, only flex-direction needs to be changed.

I adjusted the snippet accordingly...

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;

/*    position: relative; /* REMOVE */
}

/* ADD */
.location {
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
}

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        flex-direction: column;
   }
}

<div >

    <div >
        <img src="https://picsum.photos/1200/700?random=1">
        <div >
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
   </div>

    <div >
        <img src="https://picsum.photos/1200/700?random=2">
        <div >
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>

    <div >
        <img src="https://picsum.photos/1200/700?random=3">
        <div >
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>