CSS display:block and position:fixed

Question

为什么这段代码会：

div {
    background-color: yellow;
    display:block;
    position:fixed;
}

当我添加position:fixed时，为什么div无法显示为display:block（即在整个页面上流动）？否则似乎可以正常工作？

注：我对CSS非常新手，如果这只是一个愚蠢的错误，请原谅。

- Sebiddychef

---

你说的“flow across the page”是什么意思？你用的是哪个浏览器？你尝试过设置left、top、bottom等吗？ - androidavid

div 没有宽度或高度。 - underscore

http://jsfiddle.net/tutspack/KFKGk/ 查看 - underscore

@SamithaHewawasam 我该如何使其流动到页面的宽度？ - Sebiddychef

@Sebiddychef http://jsfiddle.net/tutspack/KFKGk/1/ - underscore

@Sebiddychef，我更新了我的答案。@guffa已经解释了方法，所以我不需要再解释一遍了。 - underscore

Answer 1

当你使用 position: fixed; 或 position: absolute; 时，元素会脱离文档的常规流程。

div 元素的默认设置为 width: auto;，这意味着它将使用其所在位置可用的全部宽度。当你将其从流中移除后，就不再存在可用宽度的可用度量（因为那将是无限的），因此该元素将从其内容中获取其宽度。

- Guffa

---

如何使其流动到页面的宽度？ - Sebiddychef

@Sebiddychef：你不能这样做，但是你仍然可以使用width: 100%;使它与父元素具有相同的宽度。演示：http://jsfiddle.net/Guffa/RLQj6/ - Guffa

Answer 2

对于任何具有fixed或absolute定位的[空]元素，您需要添加宽度和高度，否则它们将没有任何大小。

html, body {
  height: 1000px;
}

div {
    background-color: yellow;
    display:block;
    position:fixed;
    width:100px;
    height:100px;
}

<div></div>

最终您需要类似于这个的东西。

- underscore

---

对于两个导航栏，为其添加高度和顶部位置解决了我的问题。 - Bernardo Dal Corno