博客内容涉及到一个CSS布局问题，作者在父div设置了相对定位，子div使用了绝对定位，导致新的内容出现在绝对定位的div之上而非换行。问题在于绝对定位的子div可能超出了其父容器的范围，影响了后续元素的布局。作者展示了相关的代码片段，并寻求解决方案。
我有一个父div设置为亲戚。然后我有一个子div定位绝对，它拥有几个嵌套的子div本身。与同一课程。我已经实现了我想要的布局，但是当我离开并在上面提到的部分下面开始一个新的部分/ div时，它的内容显示在上面的div之上。不知道为什么。
我希望div 从一个新行开始，而不是干扰它上面的div，这正是发生的事情。
我的代码如下所示。
TOP SELLING PROTEIN RANGE
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Serious Mass Weight
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
blop
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
Optimum Nutrition Gold Standard Whey
£12.99
MORE INFO
ADD TO BASKET
This div is appearing on top of the ones above, despite not having a position of absolute.
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");
}
2497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
