HTML and BODY are static, which is my DIV's closest positioned ancestor?

Question

I’ve got this simple HTML5 document:

<!doctype html>
<html>
  <head>
    <style type="text/css">
      body { margin: 0; padding: 0; }
      .parent1 { height: 50px; background: #00ff00; }
      .parent1 > .child1 { height: 50%; width: 100%; background: #ffcc00; }
      .parent2 { position: absolute; width: 100%; height: 25%; background: #ff0000; }
    </style>
  </head>
  <body>
    <div class="parent1">
      <div class="child1">I'm 25px height (50% of 50px)</div>
    </div>
    <div class="parent2">I'm absolute positioned. My ancestors, body and html, are static... Where I'm getting the 25% from?</div>
  </body>
</html>

There’s no height defined for html and body, so they use the default value auto (which means that their height is their content’s height). They aren’t positioned, so they are static.

div.parent1 is 50px height.

div.parent1 has a child element with a 50% height.

div.parent2 is positioned absolute with a height of 25%.

If I’m not mistaken, a height set with percentage only works if it’s parent has a height defined (that’s the case of div.child1).

Because div.parent2 is absolute, it’s height is not computed, so body and html height is 50px. That’s clear, but I don’t understand why div.parent2 25%’s height is working… Where does it take from? Its ancestors body and html are static… Window? Viewport?

JSFiddle

Possible duplicate of [Why does percentage width work even if no explicit width value given for containing block?](http://stackoverflow.com/questions/28353625/why-does-percentage-width-work-even-if-no-explicit-width-value-given-for-contain) — Positivity, Feb 10 '16 at 15:06
Similar question can be found here as well: [CSS – why doesn’t percentage height work?](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) — crazymatt, Feb 10 '16 at 15:15

score 3 · Answer 1 · answered Feb 10 '16 at 15:07

Let's see what w3 says about absolutely positioned elements:

They define a new rectangular plane into which their contents are flowed, just as the HTML inside the <BODY> element flows into the default container.

So it sounds like the body element itself represents a default container, no matter it is static.

Taken from w3.org.

Or even better explanation from w3 wiki.

If an absolutely positioned element has no positioned ancestor, then the containing block is something called the “initial containing block,” which in practice equates to the html element. If you are looking at the web page on screen, this means the browser window; if you are printing the page, it means the page boundary.

No, the initial containing block does NOT equate to the html element, it's the html element's container. The initial containing block is the height of the viewport. the html element's height is its specified height, or if auto, the height of its contents. — Alohci, Feb 10 '16 at 20:08

score 1 · Answer 2 · edited May 23 '17 at 12:31

html is a block-level element and it lives in the initial containing block.

The initial containing block is a rectangular box which takes the width of the viewport. Hence the width of html element would be equal to the width of the viewport.

On the other hand, the containing block of body element is generated by html. Therefore they would have equal widths as well.

body itself establishes a containing block for its block-level children. And that's why a div element in normal flow will take the width of the viewport.

see https://stackoverflow.com/a/28354270/2543240

Paulie_D · Accepted Answer · 2016-02-10T15:32:15.307

0

The html 'element' in the absence of an positioned ancestor.

For an absolutely positioned element, percentage values for the left, right and width properties are relative to the width of the containing block. Percentage values for the top, bottom and height properties are relative to the height of the containing block.

In this case, the containing block is the html element,

The body had no height as the element is out of the flow.

html {
  background: green;
}
body {
  margin: 0;
  padding: 0;
  background: lightblue;
}
.parent2 {
  position: absolute;
  width: 100%;
  height: 25%;
  background: #ff0000;
}

<div class="parent2">I'm absolute positioned. My ancestors, body and html, are static... Where I'm getting the 25% from?</div>

edited Feb 10 '16 at 15:32

answered Feb 10 '16 at 15:07

Paulie_D

107,962
13
142
161

And html gets width/height from viewport? – lluisaznar Feb 10 '16 at 15:12
Great, that's what I was looking for. Maybe you should add this info about the viewport to the answer – lluisaznar Feb 10 '16 at 15:16
The others have covered that...i don't want to steal their thunder. – Paulie_D Feb 10 '16 at 15:29
It isn't the html element. See https://jsfiddle.net/kp3e4mgr/. The html element is the yellow box. The initial containing block is the html element's container. – Alohci Feb 10 '16 at 20:18

Lorenzo Lapucci · Answer 4 · 2016-02-10T15:12:44.520

-1

Your HTML is static using px. The percentage is calculated on browser page height - width

edited Feb 10 '16 at 15:12

answered Feb 10 '16 at 15:02

Lorenzo Lapucci

129
4
12

It should be `width`, not `weight`. – Václav Feb 10 '16 at 15:04

HTML and BODY are static, which is my DIV's closest positioned ancestor?

4 Answers4