Why does my relatively positioned element overlap with the element below it?

Get Help CSS
#1

Hi,

I recently completed the Tea Cozy off platform project and it’s looking 99% correct except I can’t figure out why the bottom of my “” element is overlapping my “” element when I have positioned relatively and shifted down 70px from the top.

If I nest the with the element or make the element static position the is correctly rendered under .

Here’s a link to the page: Tea Cozy v02

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy v02</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" alt="">
        </div>
        <nav>
            <ul>
                <li><a href="">Mission</a></li>
                <li><a href="">Featured Tea</a></li>
                <li><a href="">Locations</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="mission_section">
            <div id="mission_copy">
                <h2>Our Mission</h2>
                <h4>Hadpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>

        <div id="tea_month_section">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div id="tea_gallery">
                <div class="tea_box">
                    <img src="images/img-berryblitz.jpeg" alt="">
                    <h3>Fall Berry Blitz</h3>
                </div>
                <div class="tea_box">
                    <img src="images/img-spiced-rum.jpeg" alt="">
                    <h3>Spiced Rum Tea</h3>
                </div>
                <div class="tea_box">
                    <img src="images/img-donut.jpeg" alt="">
                    <h3>Seasonal Donuts</h3>
                </div>
                <div class="tea_box">
                    <img src="images/img-myrtle-ave.jpeg" alt="">
                    <h3>Myrtle Ave Tea</h3>
                </div>
                <div class="tea_box">
                    <img src="images/img-bedford-bizarre.webp" alt="">
                    <h3>Bedford Bizarre Tea</h3>
                </div>
            </div>
        </div>

        <div id="locations_section">
            <h2>Locations</h2>
            <div id="location_boxes">
                <div class="location_box">
                    <h3>Downtown</h3>
                    <p>384 West 4th</p>        
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location_box">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>        
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location_box">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>        
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>

        <div id="contact">
            <h2>The Tea Cozy</h2>
            <h5>conact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>
       
    </main>
    
    <footer>
        <h5>&copy;	The Tea Cozy 2022</h5>
    </footer>
    
    
</body>
</html>

CSS:

* {
    box-sizing: border-box;
}

html {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    text-align: center;
}

/* Header section */

header {
    height: 69px;
    width: 100%;
    position: fixed;
    top: 0;
    border-bottom: 1px solid seashell;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    background-color: black; 
}

#logo {
    margin-left: 10px;
}

#logo img {
  height: 50px;
  width: auto;
}

nav {
    margin-right: 30px;
}

nav ul li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

a {
    color: seashell;
}

/* Main Section */

main {
    position: relative;
    top: 70px;
    display: block;
}

#mission_section {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    background-image: url("images/img-mission-background.webp");
    display: flex;
    align-items: center;
    justify-content: center;
}

#mission_copy {
    width: 100%;
    background-color: black;
}

/* Tea of the Month Section */

#tea_month_section {
    width: 1000px;
    margin: 0 auto;
}

#tea_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tea_box {
    width: 300px;
    margin: 10px;
}

.tea_box img {
    width: 100%;
    height: auto;
}

/* Locations Section */

#locations_section {
    width: 1200px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("images/img-locations-background.webp");
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#location_boxes {
    display: flex;
    flex-direction: row;
}

.location_box {
    width: 300px;
    margin-left: 40px;
    margin-right: 40px;
    background-color: black;
}

/* contact sections */

#contact {
    margin: 10 auto;
}

/* Footer */

footer {
    margin-left: 20px;
    text-align: left;
    display: block;
}
#2

Hi there,

The reason your <footer> is overlapping your <main> is because your <main> is relative. When you–

position: relative;

the offset does not affect the position of any other elements. So, the space given for the element in the page layout is the same. In short, your <main> is shifted down 70px but your <footer> (because it is outside your <main>) remains in the same location as if <main> were static.

On a side note, if you would like the < to appear around your <element> name, just place a \ before the first <

#3

Oh ok, so this means if I move shift down an element I’ll have to shift down all elements beneath it the same amount if I want them all to be positioned stacked on top of each other without overlapping.

In this case the solve would be to shift the <footer> down 70px from the top of its static position as well.

1 Like
#4

That is one of the methods you can use, yes! There are more ways to accomplish the same result and I encourage you to review the finished project(s) of others just to see what methods are being applied. It’s a great way to learn and keeps your coding knowledge fresh.

Happy coding!