CSS显示：块和位置：固定

Question

为什么会这样的代码：

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

当我添加div时，

不会将display:block显示为position:fixed（即在整个页面中流动）？它似乎工作不正常？

N.B。我是CSS的新手，所以我说道，如果这只是一个愚蠢的错误

Answer 1

当您使用position: fixed;或position: absolute;时，该元素将从文档的常规流中取出。

width元素的div默认设置为auto，这意味着它将使用完整的可用宽度。当你把它从流程中取出时，对可用宽度不再有任何可用的度量（因为这将是无限的），所以相反，元素将从其内容中获得其宽度。

Answer 2

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

HTML：

<div><div>

CSS：

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

DEMO

最后你需要像this

这样的东西