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

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

html css

出现在绝对定位元素顶部的html div,html,css,Html,Css,我将父div设置为相对。然后我有一个定位为绝对的子div，它本身包含几个嵌套的子div。同一个班级。我已经实现了我想通过布局实现的目标，但是当我脱离并在上面提到的部分下面开始一个新的部分/div时，它的内容显示在上面的div之上。不知道为什么我希望div从一个新行开始，并且不干扰上面的div，这正是正在发生的事情我的代码如下所示 <section class="protein-products"> <h1>TOP SELLING PROTEIN RANGE&l

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

我希望div

从一个新行开始，并且不干扰上面的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

div

指定一个固定高度：

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

您可以为

.protein products

div

指定一个固定高度：

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

我复制了你的html和css，在我的浏览器中打开它，看看你的意思

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

由于此行为，后续图元不再考虑图元所占用的空间，该空间被设置为绝对空间，因此将移动得更高，直到与另一个图元碰撞。这就是为什么如果您（例如）将元素更改回相对位置，它将重新进入其他元素的级联/流，并再次占据不动产，从而将后续元素移到页面的较低位置

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

希望对你有所帮助。

我复制了你的html和css，在我的浏览器中打开它，看看你的意思

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

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

希望这能有所帮助。

为两个

元素提供z-index
。嗨，AjAx感谢您的回复。请您澄清我应该将z-指数设置为哪两个元素？.topsellingrange
和.promotion banner
。请记住，您要在位置：相对上设置.promotion banner
。为两个元素提供z-index
。您好，谢谢您的回复。请您澄清我应该将z-指数设置为哪两个元素？.topsellingrange
和.promotion banner
。请记住，您想在位置：relative
上设置。促销横幅。嘿，pj100非常感谢您提供了快速解决方案。如果我将height设置为auto，它还会工作吗？@jimmy118不，因为它已折叠，height auto将只解释div内部的H1。如果您检查此更新的fiddle，我将包含一个简单的脚本，该脚本将获取子级的高度，并将其添加到相对div的高度，并动态设置高度。如果您不知道高度是多少，这可能会有所帮助。否则您可以静态设置。嘿，pj100非常感谢您提供了快速解决方案的响应。如果我将height设置为auto，它还会工作吗？@jimmy118不，因为它已折叠，height auto将只解释div内部的H1。如果您检查此更新的fiddle，我将包含一个简单的脚本，该脚本将获取子级的高度，并将其添加到相对div的高度，并动态设置高度。如果您不知道高度是多少，这可能会有所帮助。否则，您可以静态设置它。
.protein-products {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 250px;
}