Absolute positioning after a table not working?

Question

I have a simple problem where I think I am missing something obvious but could not find anything to understand the behavior. I have a table and then a p tag and a div tag. All the same-level tags are default positioned. Only the inner-div in the last div has an absolute position. I thought that an absolute position in an inner-div would be absolutely positioned relative to IT'S outer div (id='outer').

Therefore, I would expect the display to consist of, in vertical order, the table, Text1 and finally Text2. That is not what is happening. Table is displayed as expected, Text 1 is also displayed after table as expected. However, Text 2 is displayed on top of the table because it takes absolute position from the body tag (or whatever is the outermost tag). Why? How to get Text2 to position after Text1. I need Text2 to be positioned absolutely for a reason. Removing the absolute positioning on div (id='inner') is not an option. So, how to get around this?

  <table border="1" style="border-collapse:collapse;">
      <tr>
        <th>Header 1</th>
      </tr>
      <tr>
        <td >09/12/2013 12:41 pm</td> 
      </tr>
  </table>
  <p style="display:block;">Text1</p>
  <div id="outer">
    <div id="inner" style="display:block;position:absolute;top:30px;">Text2</div>
  </div>

Answer 1

Since you are using absolute position this happen, is taken off the DOM and search for a new containing block:

The containing block for a positioned box is established by the nearest positioned ancestor

If you don't set the parent with any position value then the div is off and takes values in relation to another parent.

Set the position to the outer div.

<div id="outer" style="position:relative">
  <div id="inner" style="display:block;position:relative;top:30px;">Text2</div>
</div>

_{In advice try to handle your styles in CSS file}

Answer 2

did you add position:relative to #outer div?

Answer 3

Because you put position:absolute;

code here :

<table border="1" style="border-collapse:collapse;">
      <tr>
        <th>Header 1</th>
      </tr>
      <tr>
        <td >09/12/2013 12:41 pm</td> 
      </tr>
  </table>
  <p style="display:block;">Text1</p>
  <div id="outer" style="position:relative">
    <div id="inner" style="display:block;top:30px;">Text2</div>
  </div>

You can put position:relative for your "outer" div or for you "inner" div.