2

The definition of 'absolute' positioning is: "The element is positioned relative to its first positioned (not static) ancestor element".

My question is how does the element behave when all ancestors are 'static'?

Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?

CrazySynthax
  • 13,662
  • 34
  • 99
  • 183

1 Answers1

2

Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?

No, not entirely. The behavior is the same with respect to the top, right, bottom and left offsets, but not with respect to scrolling, which is what distinguishes fixed positioning from regular absolute positioning.

When there are no positioned ancestors, the containing block of elements with position: absolute is the initial containing block.

The containing block of elements with position: fixed is the viewport, not the initial containing block. The viewport does not move when scrolling, but the initial containing block does (because it can be larger than the viewport), which is why fixed-positioned elements do not scroll with the page, but elements with position: absolute do, even when the latter have no positioned ancestors.

You can manipulate the page layout such that the content scrolls but the initial containing block never does, resulting in a hack that makes position: absolute with no positioned ancestors behave like position: fixed, even in Internet Explorer 6.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • [CSS 2.2 10.1 1](https://www.w3.org/TR/CSS22/visudet.html#containing-block-details) says that for continuous media the initial containing block has the dimensions of the viewport. Fpr paged media there is no viewport. When can the initial containing block be larger than the viewport? – Alohci Oct 19 '18 at 17:04
  • @Alohci: You're right, I'm not sure how I drew that conclusion. Presumably, then, when content is larger than the viewport, it overflows both it and the initial containing block, causing scrolling, but does not cause the initial containing block to expand. I think what happens instead is that the content occupies a larger area on the canvas (which, IIRC, is infinitely large). – BoltClock Oct 19 '18 at 17:11