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，在我的浏览器中打开它，看看你的意思。

如果我正确地理解了你的问题，你所看到的是从相对元素的级联中移除绝对定位的元素。

由于这种行为，后续元素不再尊重被绝对元素占据的空间，因此将向上移动直到与另一个元素发生碰撞。这就是为什么如果您（例如）将元素更改回相对位置，它会重新进入其他元素的级联/流程并再次占用不动产，从而将后续元素移动到页面下方。< / p>

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

希望有所帮助。