is this supposed to work? top & bottom properties do accept % values even when the parent element has an undefined height

Question

I have stumbled upon something that made me doubt my understanding of percentage values in css

I was under the impression that percentage values wouldn't work when the length they took as a reference didn't have a defined value (for instance, setting the height of an element to any % value doesn't work unless the parent element has a specified height on which the % can be computed upon)

However, I found out by testing that this is not the case for the top & bottom properties of absolutely positioned elements, here's an example, it consists of 2 divs of content-dependent height, the parent (green) is has position:relative and the child (red) is absolutely positioned and has a top:50% position value

.parent_element{
    background:#55cc55;
    position:relative;
}

.child_element{
    background:#dd5555;
    position:absolute; 
    top:50%;
}

<div class="parent_element">
  <div class="child_element">
    this is<br>a<br>test
  </div>

<!-- lorem ipsum text-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet rutrum est. Mauris sed sollicitudin erat, a condimentum diam. Duis nec dui nec nibh tempus condimentum. Suspendisse potenti. Quisque ligula augue, bibendum sed eros sed, molestie tempus sapien. Nullam auctor rutrum arcu, eget vehicula turpis mattis at. Cras elit erat, pulvinar ut placerat sed, pulvinar eu arcu. Curabitur pulvinar pharetra nisl non imperdiet. Duis vehicula euismod turpis, sit amet euismod nisi tincidunt nec. Ut congue tristique diam, ac egestas dui egestas quis.

Quisque vitae sapien quis nisi facilisis suscipit a a velit. Vestibulum ut vestibulum velit, sed gravida est. Integer placerat nisl enim, vel suscipit tellus cursus eu. In aliquet malesuada nisi, a aliquet nisi. Etiam volutpat, lacus a condimentum laoreet, purus augue cursus tortor, sed sollicitudin nisi risus non est. Etiam eleifend sollicitudin tortor sit amet semper. Duis tempus sed nisl in condimentum. Fusce sit amet ornare nibh. Vivamus sit amet massa velit. Donec non quam nec risus cursus tincidunt nec aliquet leo. Cras et eros eget justo ultricies laoreet. Suspendisse maximus felis at augue viverra, id iaculis urna commodo. Nulla erat lacus, ultrices quis maximus non, consectetur eget elit. In hac habitasse platea dictumst.

Nullam porttitor in nibh at hendrerit. Phasellus sit amet tristique purus, eu vulputate augue. Nunc ultrices magna libero, ut fringilla nibh hendrerit quis. Nullam imperdiet ornare dolor, viverra aliquam tortor cursus sed. Suspendisse finibus venenatis magna, eu porta elit bibendum in. Sed vitae hendrerit lacus. Sed porttitor tempus magna, in convallis augue pulvinar eu. Aenean et mi fermentum nunc elementum dapibus. Maecenas vulputate sodales magna, vitae commodo lorem dictum eu. Aliquam placerat risus ipsum, posuere lacinia dolor dapibus sit amet. Suspendisse sem ex, venenatis non semper aliquet, semper sollicitudin augue. Aenean arcu dui, vulputate ac sapien in, mollis maximus purus.  
</div>

As you can see, the child element positioned left a space of 50% of the parent div's height from said div's top edge, even though the parent didn't have a specified height, so my question is, why does this work? I expected nothing to happen since I didn't specify a height for the parent, yet it works Same when I try bottom instead of top, and it still works no matter how much the parent's content changes it's height

Can someone enlighten me as to when I can expect percentage values to work even though their reference length hasn't been explicitly defined please (I made sure that the parent's div was not being take as reference instead of the height, which is what happens when you use % to specify top and bottom margins of an element)

AAAh I think I get it Always thought that the beef with percentage values was that they didn't know the reference property's value unless it was explicitly set, but I guess it's more a problem of a dog chasing it's tail then? since (if in flow) the child's height would change the parent's height (it's reference), which in turn would make the child change it's height again, and the whole thing couldn't resolve, right? Thanks that clarifies it, If someone knows where I could read more about this I'd appreciate it, tried looking up the issue beforehand but found nothing — super potion, Sep 19 '20 at 01:49

Temani Afif · Accepted Answer · 2021-01-25T14:49:30.773

I was under the impression that percentage values wouldn't work when the length they took as a reference didn't have a defined value

For absolutely positioned element we don't need an explicit height:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

So the rule you know apply only if the element is not absolutely positioned.

Same thing for to top/bottom. The logic behind is to avoid having a cycle and an infinite loop. An element that define the height of its containing block cannot have its height in percentage because we cannot resolve that percentage. An out of the flow element (like absolutely positioned element) will not contribue to the height of its containing block so we can easily resolve percentage value against the height of the containing block.

There is more complex cases where we can resolve percentage value without using position:absolute and without a defined height. Find some of them here: https://stackoverflow.com/a/52137966/8620333

There is also a section in the specification detailing the different cases of percentage value used with height/width: https://www.w3.org/TR/css-sizing-3/#percentage-sizing. You will see that it's more complex than what you think.

is this supposed to work? top & bottom properties do accept % values even when the parent element has an undefined height

1 Answers1