Html 相对放置div后的内容

如果我相对地显示一个div并给它一个上边距，那么我是否也必须给以下所有内容一个相同的上边距？因为后面的内容将位于元素的常规位置之后

正如您在这里看到的，

蓝色

div位于

红色

div上方，它紧跟着蓝色的原始位置

有没有一种方法可以使

红色

20px更低，而不使其

相对

？换句话说，不要对以下所有内容都这样做

#a{
宽度：100%；
背景颜色：黄色；
高度：50px；
}
#b{
位置：相对位置；
顶部：20px；
宽度：50%；
背景颜色：蓝色；
高度：50px；
}
#c{
宽度：100%；
背景色：红色；
高度：50px；
}

添加

页边距顶部：20px到您的
#c
@HashemQolami是对的，如果可以的话，通过在b上使用
边距顶部而不是位置
相对
来维护css将更容易。
最简单的事情就是将
\b
的
边距顶部设置为20px，然后
\c
将跟随它


#a{
宽度：100%；
背景颜色：黄色；
高度：50px；
}
#b{
边缘顶部：20px；
宽度：50%；
背景颜色：蓝色；
高度：50px；
}
#c{
宽度：100%；
背景色：红色；
高度：50px；
}

将边距40px添加到#c的顶部
您可以添加
边距底部：40px到
#b
元素：


#a{
宽度：100%；
背景颜色：黄色；
高度：50px；
}
#b{
位置：相对位置；
顶部：20px；
宽度：50%；
背景颜色：蓝色；
高度：50px；
边缘底部：40px；
}
#c{
宽度：100%；
背景色：红色；
高度：50px；
}

为什么不使用
页边距顶部
而不是定位元素？确实如此。“top”不是边距——它相对于元素在流中的自然位置的顶部移动元素。它之外的其他元素不会意识到它的重新定位，但如果您只使用边距，这将很好。此外，您可能会发现这很有帮助：实际上我的意思是使用
边距顶部
作为
#b
而不是
顶部
偏移量。我是Hashem顺便说一句：）@HashemQolami，很抱歉把你的名字弄错了！！我已经改正了，真的很抱歉！！