How is the css property top calculated for absolute elements that do not set the property themselves?

Question

Possible Duplicate:
position: absolute without setting top/left/bottom/right?

Looking at the following code, I have div#box2 that has position: absolute set on it. It is in between two divs that have position: static set on them. Based on the following code, I would expect div#box2 to be at the top left of the body element. However, when it is rendered it receives a top value placing it beneath box1. Why does this happen?

I understand that when I explicitly set the top value of div#box2 to 0px, it appears at the top. I just don't know why it is not computed to 0px by the browser to begin with.

Here is some sample code:

<!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box2"><span>2</span></div>
      <div id="box3"><span>3</span></div>
    </div>
  </body>
</html>

you want div box 2 at place of div box 1? – Mr. Alien Jul 26 '12 at 15:21 — Mr. Alien, Jul 26 '12 at 15:21
why there is no div that is set to ´position:relative´? – Jul 26 '12 at 15:23 — , Jul 26 '12 at 15:23

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

5

The default value of top is "auto", not "0" (source), therefore it should not be positioned at the top of the <body> element.

As for why "auto" translates to "same position as if position was static", see the CSS specification on positioning (emphasis mine):

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

If all three of ‘top’, ‘height’, and ‘bottom’ are ‘auto’: First set any ‘auto’ values for ‘margin-top’ and ‘margin-bottom’ to ‘0’, then set ‘top’ to the static position, and finally apply rule number three below.

...

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 26 '12 at 15:22

0b10011

18,397
4
65
86

so use `top: 0px;` `left 0px;` ..nice 1 mate.. – Mr. Alien Jul 26 '12 at 15:24
I understand that top's default value is auto. I am merely confused why the auto value calculated places div#box2 beneath div#box1. Reading [MDN](https://developer.mozilla.org/en/CSS/position), it says an absolutely positioned element is positioned relative to its nearest positioned ancestor. I assumed that would mean the absolutely positioned element would auto calculate a top value of 0 since it is relative to the nearest positioned element. Your answer is correct, but I'm going with @Jrod because he explains how the top value is getting calculated. – blinkmacalahan Jul 26 '12 at 15:48

score 0 · Accepted Answer · answered Jul 26 '12 at 15:25

When an element is given position absolute it is taken out of the flow allowing other elements to be placed above or below it. Without explicitly setting a top value, the top value will retain the elements position had it not be removed from the flow.

If we switch the order of the boxes you can see this taking place as #box2 is completely removed from the flow and sits outside of #content but still stacks where it would be if it had position:static

<!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box3"><span>3</span></div>
      <div id="box2"><span>2</span></div>

    </div>
  </body>
</html>

Do you have any documentation/articles/anything explaining "Without explicitly setting a top value, the top value will retain the elements position had it not be removed from the flow?" Thanks! — blinkmacalahan, Jul 26 '12 at 15:53

How is the css property top calculated for absolute elements that do not set the property themselves?

2 Answers2