美文网首页
固定位置外边距重叠

固定位置外边距重叠

作者: 刘宏儿 | 来源:发表于2018-10-18 21:52 被阅读0次
代码

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


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

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

解决的办法有两种:

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

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

相关文章

  • 固定位置外边距重叠

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

  • 盒子模型基本设置

    内边距:padding 外边距:margin 外边距重叠:外边距重叠.png 浮动:float 内联元素浮动: 内...

  • HTML5+CSS——12垂直外边距重叠、内联盒模型、displ

    一.垂直外边距的重叠 在网页中垂直方向的相邻的!!外边距会发生外边距的重叠,所谓的外边距重叠指兄弟之间的相邻外边距...

  • 外边距重叠

    学习HTML的时候遇到过这种情况: 两个块级box垂直方向相邻,如果设置它们的上下margin,就会发生重叠(ma...

  • 13.margin垂直外边距的重叠,导致子父元素移动问题

    margin垂直外边距的重叠问题在网页中相邻的垂直方向的外边距会发生外边距的重叠所谓的外边距重叠指兄弟元素之间的相...

  • 什么是外边距重叠,重叠的结果是什么?

    1.什么是外边距重叠? 外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等...

  • 第四天:外边距重叠、css背景设置、float浮动、伪元素

    一.外边距重叠 两个相邻盒子的外边距发生重叠时,外边距大的覆盖外边距小的盒子。 margin 可以设置负数,表现为...

  • 盒子模型(下)

    外边距的重叠 在网页中相邻的上下方向的外边距会发生外边距的重叠相邻兄弟元素的外边距重叠后会取最大值的一个!如果父子...

  • 04day

    内边距:padding 外边距:margin 外边距重叠: 浮动.png内联元素浮动:

  • 2020-03-24

    1.什么是外边距重叠?重叠的结果是什么? 外边距重叠就是margin-collapse 在css当中,相邻的两个盒...

网友评论

      本文标题:固定位置外边距重叠

      本文链接:https://www.haomeiwen.com/subject/soqezftx.html