
巧用 relative 属性,避免负 margin-top 造成的背景错位
在标准文档流中,使用负 margin-top 值向上移动图像下方的 div 元素时,常常会遇到 div 背景色错位的问题:背景色跑到图像下方,而文本内容却停留在图像上方。
这是因为负 margin-top 改变了 div 的实际位置,但背景并未随之移动,依然停留在 div 的原始位置。
解决方法很简单:为该 div 元素添加 position: relative; 属性。这样,div 的位置偏移将相对于其在标准文档流中的位置进行计算,背景色也会随之正确显示在图像上方。
更详细的技术解释,请参考:










