CODEWITHSUNDEEP
htmlcss
jimmy118
jimmy118

Reputation: 323

html div appearing on top of absolute positioned element

I have a parent div set as relative. Then I have a child div positioned absolute, which holds several nested child divs itself. With the same class. I have achieved what I wanted to achieve with the layout, but when I break away and start a new section / div below the section mentioned above, its content is displayed on top of the above divs. Not sure why.

I want the div <section class="promotion-banner"> to start on a new line and not interfere with the divs above it, which is exactly whats happening.

My code is shown below.

<section class="protein-products">
    <h1>TOP SELLING PROTEIN RANGE</h1>
    <div class="topsellingrange">
        <div class="protein-product">
            <img src="images/index/protein1.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein2.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Serious Mass Weight</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
            <div class="protein-product">
            <img src="images/index/protein3.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein4.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein5.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
            <div class="protein-product">    
            <img src="images/index/protein6.jpg">    
            <img src="images/5star.jpg">    
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>    
            <span class="product-price">&pound12.99</span>    
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">    
            <img src="images/index/protein7.jpg">    
            <img src="images/5star.jpg">    
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>    
            <span class="product-price">&pound12.99</span>    
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein8.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>    
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">    
            <img src="images/index/protein9.jpg">    
            <img src="images/5star.jpg">    
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>    
            <span class="product-price">&pound12.99</span>    
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">    
            <img src="images/index/protein10.jpg">    
            <img src="images/5star.jpg">    
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>    
            <span class="product-price">&pound12.99</span>    
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein11.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein12.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein13.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein14.jpg">
            <img src="images/5star.jpg">
            <span class="heading">blop</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein15.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
        <div class="protein-product">
            <img src="images/index/protein16.jpg">
            <img src="images/5star.jpg">
            <span class="heading">Optimum Nutrition Gold Standard Whey</span>
            <span class="product-price">&pound12.99</span>
            <button class="more-info">MORE INFO</button>
            <button class="shopnow">ADD TO BASKET</button>
        </div>
    </div>
</section>

<section class="promotion-banner">
    <p>This div is appearing on top of the ones above, despite not having a position of absolute.</p>
</section>

CSS:

.protein-products {
    width: 100%;
    position: relative;
    justify-content: space-around;
}

.topsellingrange {
    width: 400%;
    display: flex;
    position: absolute;
}

.protein-product {
    width: 6.25%;
    text-align: center;
}

.protein-product img {
    width: 50%;
    display: block;
    margin: 0 auto 15px;
}

.protein-product button {
    width: 50%;
}

.promotion-banner {
    width: 100%;
    height: 70vh;
    background-image: url("./images/newstockbanner.jpg");
}

Upvotes: 0

Views: 2253

Answers (3)

4cody
4cody

Reputation: 354

I copied your html and css to open it in my browser to see what you mean.

If I understand your question correctly what you're seeing is the absolute positioned element being removed from the cascade of the relative elements.

Because of this behavior the subsequent elements no longer respect the space taken up by the element that was made absolute and hence will move higher until colliding with another element. That's why if you (for example) change the element back to a relative position it re-enters the cascade/flow of the other elements and takes up real-estate once again, moving subsequent elements lower on the page.

The absolute element is positioned with regards to the parent element (if it's relative or absolute).

Hope that helps.

Upvotes: 1

mridula
mridula

Reputation: 3281

You could assign a fixed height to the .protein-products div:

.protein-products {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 250px;
}

Upvotes: 1

pj100
pj100

Reputation: 402

The really simple answer to this question is that the parent element needs to have explicit height. When you set your child to absolute, the parent collapses as it no longer will 'wrap' the absolute positioned element. This is standard behavior and is working as CSS should.

As you can see in this fiddle, just specifying a height fixes the issue: https://jsfiddle.net/41scrhy6/1/

.protein-products {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height:200px;
}

Upvotes: 1

Related Questions