html div出现在绝对定位元素的顶部

Question

我将父div设置为相对。 然后我有一个定位为绝对值的子div，它本身包含多个嵌套的子div。 同班。 我已经实现了布局想要实现的目标，但是当我离开并在上述部分的下面开始一个新的部分/ div时，其内容显示在上述div的顶部。 不知道为什么。

我希望div <section class="promotion-banner">从新的一行开始，而不要干扰其上方的div，这正是正在发生的情况。

我的代码如下所示。

<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");
}

Answer 1

这个问题的真正简单答案是父元素需要具有明确的高度。 当您将孩子设置为绝对时，父对象会折叠，因为它将不再“包装”绝对定位的元素。 这是标准行为，可以像CSS一样工作。

如您所见，仅指定高度即可解决此问题： https : //jsfiddle.net/41scrhy6/1/

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

Answer 2

您可以为.protein-products div分配一个固定的高度：

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

Answer 3

我复制了您的html和CSS，以在浏览器中打开它，以了解您的意思。

如果我正确理解了您的问题，那么您看到的是从相对元素的级联中删除了绝对定位的元素。

由于此行为，后续元素不再尊重该元素所占的绝对空间，因此将移动得更高，直到与另一个元素碰撞为止。 因此，如果您（例如）将元素更改回相对位置，则会重新输入其他元素的级联/流，并再次占用房地产，从而将后续元素移至页面下方。

绝对元素相对于父元素（如果是相对或绝对）定位。

希望能有所帮助。