当前位置:  开发笔记 > 前端 > 正文

CSS位置:固定没有顶部给出意想不到的布局?

如何解决《CSS位置:固定没有顶部给出意想不到的布局?》经验,为你挑选了0个好方法。

鉴于:

   
     
Fixed div

Non-fixed div

Non-fixed div

Non-fixed div

和:

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
 }

#fixed {
    position: static;
    width: 100%;
    border: 3px solid #f00;
}
#nonfixed {
    margin-top: 50px;
    border: 3px solid #00f;
}     

请注意position:static,这给出了预期的结果(小提琴):

在此输入图像描述

但是,position:static改为fixed,你得到这个(小提琴)

在此输入图像描述

即使#fixeddiv不在里面#nonfixed,它也占据了上边缘#nonfixed.这在Chrome和Firefox中都会发生.奇怪的是,两个浏览器中的开发工具都没有显示#fixed具有任何边距的div,所以显然它被定位为好像它被固定#nonfixeddiv中.

如果我添加top:0#fixed规则集中div会回到窗口的顶部,但是如果没有规范,它不应该出现在顶部(即正常流程中的位置,但不影响其他元素)top

为了完整:position:relative产生相同的结果staticabsolute看起来一样fixed.

我在规范中找不到任何直接解决为什么绝对定位元素应该相对于后续兄弟定位的内容.事实上,阅读我发现的规范(强调我的):

10.6.4绝对定位,未替换的元素

...

如果'top','height'和'bottom'都是auto,则将'top'设置为静态位置并在下面应用规则3.

...

    'height'和'bottom'是'auto'而'top'不是'auto',那么高度是基于每10.6.7的内容,为'margin-top'和'margin-bottom设置'auto'值'到0,解决'底部'

这似乎表明该#fixed框应该确实位于视口的顶部.

由于FF和Chrome都做同样的事情,我猜它应该以这种方式工作,但我想知道为什么.任何人都可以根据规范解释这种行为吗?

推荐阅读
殉情放开那只小兔子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有