7

Could someone explain the reason why a position: absolute; can only be positioned in relation to its nearest non - position: static; parent?

What is the reason the element can not be positioned in relation to its position: static; parent?

Cu1ture
  • 1,273
  • 1
  • 14
  • 29
  • 4
    The spec doesn't really say much about this other than that it's just how it is. It does, however, say that elements with `position: static` are considered *non-positioned* elements, but of course, that hardly explains anything. – BoltClock Jul 30 '14 at 16:23
  • possible duplicate of [Difference between static and relative positioning](http://stackoverflow.com/questions/5011211/difference-between-static-and-relative-positioning) – LeBen Jul 30 '14 at 16:24
  • @LeBen: While that question is related, I don't think it's a duplicate. – BoltClock Jul 30 '14 at 16:25
  • “Possible” duplicate ;-) Yeah I agree, sorry about that. – LeBen Jul 30 '14 at 16:26
  • Yeh I understand that static is in effect 'position: none' but I was trying to find the example case that justifies the non -'position: static' restriction. Could just be one of those things tho. – Cu1ture Jul 30 '14 at 16:28

1 Answers1

6

I believe that the reasoning behind this is so that you can position absolute elements relative to elements that are not just that element's direct parent. Since position: static is the default, it makes sense to have it be the determining factor on whether the element should position itself relative to that parent.

For example, I could use the following html to position an element relative to its grandparent:

<div id="grandparent" style="position:relative">
    <div id="parent">
       <div id="child" style="position:absolute;top:0">
       </div>
    </div>
</div>
neatnick
  • 1,489
  • 1
  • 18
  • 29
  • 4
    Correct. The element that the absolutely-positioned element is relative to is called its [containing block](http://www.w3.org/TR/CSS21/visudet.html#containing-block-details). I just recalled an example of using the position property to control which element is the containing block that is given in [this section](http://www.w3.org/TR/CSS21/visufx.html) which describes the overflow property. That example shows that an absolutely-positioned element is not affected by its parent's overflow property if its containing block is its grandparent or some other distant ancestor. – BoltClock Jul 30 '14 at 16:49