Div with position: Fixed loses total container width

Question

In the example below, see that the div naturally occupies the whole width of the body, but when I click the button Fix to change the property position for fixed, it loses its full width, looking like an element inline, occupying only the width of the small text within it.

function fixar(e){
   e.outerHTML = '';
   document.querySelector("div").style.position = "fixed";
}

div{
   background: yellow;
   height: 100px;
}

<div>
   texto
</div>
<section>
   <button onClick="fixar(this)">Fixar</button>
</section>

Why by changing the position property of a div for fixed it ceases to occupy the entire width of the screen, being only the width of the internal content, as if it were an element inline?

I know using width: 100% will occupy the whole width, but I don’t want solve the problem, I want to understand the behavior.

Answer 1

I believe that’s it

The size and position of an element are often impacted by its containing block. Percentage values that are Applied to the width, height, padding, margin, and offset properties of an Absolutely positioned element (i.e., which has its position set to Absolute or Fixed) are computed from the element’s containing block.

"...the displacement properties of an absolutely positioned element (i.e., which has its position defined as absolute or fixed) are calculated from the block containing the element."

That is, its size is defined by the size of the content itself. Unless you explicitly state its size. So much for position:absolute, or position:fixed this behavior occurs in a similar way. And the size of the box-model is the size of the element’s own content.

Source in the official Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Effects_of_the_containing_block

---

A Fixed element

The element fixed is :

• Removed from normal document flow and no space is created for the element in the page layout.
• He’s positioned in relation to the first content box which is established by viewport (there are exceptions, see link).
• Its final position is determined by the values of top, right, bottom, and left.
• This value always creates a new stacking context (z-index).
• In printed documents, the element is placed in the same position on all pages.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed

Answer 2

!!! Ctrl+C / Ctrl+V !!!

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 while 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.

In free translation:

When you use position: fixed; or position: absolute;, element is removed from the regular document flow.

The default setting for width of a single element div is auto, which means he’ll use the full width available where he is. When you exit the stream, there is no longer any measure usable for width available (because that would be infinite), then instead the element will get its width from its contents.

---

Source: reply of Guffa in the Soen.