表不工作后的绝对定位？

Question

我有一个简单的问题，我认为我遗漏了一些明显的东西，但找不到任何东西来理解这种行为。我有一个表，然后是一个 p 标签和一个 div 标签。所有同级标签都是默认定位的。只有最后一个 div 中的 inner-div 具有绝对位置。我认为内部 div 中的绝对位置将相对于它的外部 div (id='outer') 绝对定位。

因此，我希望显示内容按垂直顺序包括表格、Text1，最后是 Text2。这不是正在发生的事情。表格按预期显示，文本 1 也按预期显示在表格之后。但是，文本 2 显示在表格顶部，因为它从正文标记（或最外层标记）获取绝对位置。为什么？如何让 Text2 在 Text1 之后定位。我需要绝对定位 Text2 是有原因的。删除 div (id='inner') 上的绝对定位不是一种选择。那么，如何解决这个问题呢？

  <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

由于您使用的是绝对位置，因此会从 DOM 中取出并搜索新的包含块：

定位框的包含块由最近的定位祖先建立

如果您没有使用任何 position 值设置父级，则 div 处于关闭状态并采用与另一个父级相关的值。

将位置设置为外部div。

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

_{建议尝试在 CSS 文件中处理您的样式}

Answer 2

你添加 position:relative 到 #outer div 了吗？

Answer 3

因为你把position:absolute;

代码在这里：

<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>

您可以将position:relative 用于“外部”div 或“内部”div。