固定位置外边距重叠

代码

两个div,同级，第二个有外边距，第一个没有，给第一个设置fixed，但是没有top值，显示的效果如下


可以看到第一个div脱离文档流，但是总是跟着第二个div

这是因为第一个div脱离文档流以它的父元素body来定位，但是父元素body和子元素第二个div都有外边距就会发生外边距重叠，通常外边距合并的距离为两者中最大的那一个，所以最后的外边距是和第二个外边距一样的

解决的办法有两种：

①设置完position:fixed之后，设置top的值

②通常给父元素设置margin，给子元素设置padding;

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,955评论 1赞 45
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,110评论 0赞 1
  • 浮动定位BFC边距合并
    relative:生成相对定位的元素，通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,008评论 0赞 2
  • 片段
    静静地点一支烟 望大路上人流车缓 他们在忙碌什么 喇叭声刺耳不断 吐一圈袅袅烟圈 沉自于自我流连 一声尖叫打断 抬...
    垄上行云阅读 167评论 0赞 0