CSS 同级元素position:fixed和margin-top共同使用的问题

Kerr1Gan 发布于2019-08-29 16:43 / 3260人阅读

摘要：同时设置和仍会空出的距离。给设置，如不受和的布局影响。之后补充详细的测试代码和效果图总结归根结底是塌陷问题对的影响。给设置，颜色和背景色一致。给设置，这种会导致的滚动条消失。名字和盒模型重啦待改不懂不懂塌陷塌陷问题的现象与解决

问题描述

想用CSS实现顶部固定的效果：

尝试margin-top加position:fixed实现，代码如下：




  
  
  Test
  


    123
    
        aside
        main

结果header没有定位在顶部，而是空出了content的margin-top距离：

按照position:fixed的定义，header已经脱离文档流，应该不会受到content布局影响，但结果并非如此。

问题探究

1.content的margin-top改为padding-top：可实现预期效果。
2.content同时设置margin-top和padding-top：仍会空出margin-top的距离。
3.body设置padding-top：会空出body的padding-top的距离，可实现预期效果。
4.body设置margin-top：会空出max(body->margin-top,content->margin-top)的距离。
5.给header设置top，如top: 0;：不受body和content的布局影响。
TBD：之后补充详细的测试代码和效果图(￣∇￣)...

总结

归根结底是margin-top塌陷问题对position:fixed的影响。首先，对于position:fixed元素，如果不指定top，它在垂直方向上的参考原点是body盒模型的content的上边界。如果指定top，它在垂直方向上的参考原点才是我们常说的视窗(viewport)的上边界，left和水平方向同理。这里的参考原点是指fixed元素布局时的参考对象，一旦确定，即便页面被下拉，body上边界上移，fixed元素位置也不再改变。其次，因为margin-top塌陷问题，设置content的margin-top后，body的content部分会下移，即参考原点下移，所以fixed元素会空出margin-top的距离。

所以，可以从两方面解决这个问题：
1.将参考原点改为视窗：给fixed元素设置top。
2.解决margin-top塌陷问题，更多方法见下方链接：
1）给body设置padding-top。
2）给body设置border，border颜色和背景色一致。
3）给body设置position:fixed，这种会导致body的滚动条消失。

先将就看着呀～忙过这阵来完善(允悲)(允悲)。。。
TBD：content名字和盒模型content重啦待改...

不懂position:fixed？=> position|MDN
不懂margin-top塌陷？=> margin-top塌陷问题的现象与解决

云服务器 GPU云服务器 position:fixed 获取同级元素 css的使用 css元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113931.html

彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

bladefury 2019-08-02 16:16 评论0 收藏0
彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

RobinTang 2019-08-30 10:51 评论0 收藏0
CSS 面试题总结

摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 CSS 中类 (classes) 和 ID 的区别。书写上的差别：class名用.号开头来定义，id名用#号开头来定义；优先级不同（权重不同）调用上的...

tomato 2019-08-29 15:06 评论0 收藏0
CSS3开发文档

摘要：站点前端开发文档原文选择器原文继承属性原文核心模块原文盒子模型原文背景图像原文清除浮动原文定位选择器并集对选择器进行分组，被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。站点：前端开发文档原文：CSS选择器原文：CSS继承属性原文：CSS3核心模块原文：CSS盒子模型原文：CSS背景图像原文：CSS清除浮动原文：CSS定位 CSS选择器并集：对选择器进行分组，...

gplane 2019-08-30 15:56 评论0 收藏0