How position absolute and fixed block elements get their dimension?

user_6949187 0
Viewed 928

actually I saw many questions like this but I can't found normal answer of this question because that I open this question again.

When we have block element(display: block) this element contain full width of parent component if element itself root element this element width take 100%.

But when we look block element(display:block) but position absolute elements there are work like inline-block elements(work like block element but width not full of parent component) even parent element position relative.

Can anyone explain me why position absolute and fixed elements width not work like display: block elements.

https://jsfiddle.net/epbkmzh3/28/

    <div class="container">
      <div style="background: red;"> 1 </div>
    </div>
    
    
    <div class="container" style="position: relative;">
      <div style="position: absolute; background: red;"> 1 </div>
    </div>
css html
2 Answers

It's because absolute and fixed positioning removes the element from document flow.

And since those elements are removed from document flow, there is no reference for what width they should be, so they only take as much space as their content.

They are still "block" elements if they are inherently block elements (div, p, etc.), unless the display property is changed via CSS. Edit for clarity: The browser will still compute as display: block even if the display property is changed via CSS.

Here is some documentation on document flow: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

The important part:

Taking an item out of flow

All elements are in-flow apart from:

    floated items
    items with position: absolute (including position: fixed which acts in the same way)
    the root element (html)

Out of flow items create a new Block Formatting Context (BFC) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. The root element therefore is out of flow, as the container for everything in our document, and establishes the Block Formatting Context for the document.
user_11721890

Here is the Specification detailing how you can find the width/height of any element: https://www.w3.org/TR/CSS21/visudet.html

From there you can read for absolute element that:

The constraint that determines the used values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

Then

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.

And the rule number three:

'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'

The rule number one is also similar

And if you continue reading you will find how to calculate the shrink-to-fit width. You will also notice that the same shrink-to-fit algorithm apply to float and inline-block element

Also note that fixed element is a particular case of absolute so the same rule applies. The only difference is the containing block

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. ref

You can also see that block elements follow almost the same constraint (without left/right) but the rules are different:

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Then

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

This will make width = width of containing block

An important difference between inline-block element is that absolute element will not take the width of their content like we may think. This happen in most of the case due to the constraint explained above but check the below example:

.container {
 clear:left;
 margin:5px;
}
<div class="container" style="float:left;position:relative;">
  <div style="display:inline-block; background: red;"> 1 1 1 1 1 1  </div>
</div>

<div class="container" style="float:left;position:relative;">
  <div style="position: absolute; background: red;"> 1 1 1 1 1 1  </div>
</div>

Note how the absolute element will wrap to the smallest size possible unline the inline-block. This is due to the fact that the containing block is also a shrink-to-fit container.

Related: Why everything word-wrap inside an absolute element nested inside a float or inline-block element

user_86203330
Related