Why absolutely positioned parent element width is zero?

Question

Absolute positioning allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. These values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

Below is the code, where absolute positioned child(p) will be relative to the next parent element(div) with absolute positioning, but the div block width is zero.

<div  style= "position:absolute;">
    <p style = "position:absolute; top:4px; left:5px;">
        text text
    </p>
    <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> 
</div>

Below is the code, where absolute positioned child(p) will be relative to the next parent element(div) with relative positioning, with the div block width as non-zero.

<div style= "position:relative;">
    <p style = "position:absolute; top: 1px; left: 5px;">
        text text
    </p>
    <br/> <br/> <br/> <br/> <br/>
    <br/> <br/> <br/> <br/> <br/> 
</div>

In first case, Why absolutely positioned parent element(div) width is zero?

Answer 1

Absolutely positioned elements don't decide their own width, they need to be defined. A static div is automatically 100% wide, but as soon as you position it absolute it loses this width in favor of a predefined width, or the default 0. Static (and relative) elements will be pushed by their contents, but absolute ones won't.

Answer 2

As per the specs here: http://www.w3.org/TR/css3-positioning/#abs-pos:

In the absolute positioning model... is removed from the normal flow entirely... absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed or page) positioned descendants..

In the example you provided, the div is absolutely positioned and hence is removed from the normal flow. Not only that, the descendant p is also absolutely positioned and hence is also removed from the flow, but its containing block is established by the div.

Now, from the specs here: http://www.w3.org/TR/css3-positioning/#abs-non-replaced-width (emphasis mine):

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.

So, in your example the left, right and width are absent from properties the rule number three applies (ignore direction property as of now, rules one and three are same regarding the width).

The rule 3 states (emphasis mine):

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

With the child p out of the flow, what remains there to derive the width of the div to make it shrink-to-fit? The only text content it has, is breaks.

Effectively, this shrinks the div to 0.

---

For the p inside that div, the same rules apply. It also shrinks-to-fit, but its containing block is established by its ancestor div (see first ref above). So it will shrink within the bounds of the container div trying to accommodate as much content as possible.

Add this style to the p - word-break: break-all and you will see that the p will then shrink to a width to accommodate one character.