CSS display:block and position:fixed

Question

Why will this code:

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

not display the div as display:block (i.e. flow across the page) when I add position:fixed? It seems to work otherwise?

N.B. I am very new to CSS so I appologise if it is just a silly error

Answer 1

When you use position: fixed; or position: absolute;, the element is taken out of the regular flow of the document.

The default setting for width for a div element is auto, which means that it will use the full available width where it is. When you take it out of the flow, there is no longer any usable measure for available width (because that would be infinite), so instead the element will get its width from its content.

Answer 2

You need to add width and height to any [empty] elements with position either fixed or absolute, otherwise they won't have any size.

html, body {
  height: 1000px;
}

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

<div></div>

Finally u need something like this