Question

我有一个简单的问题，我认为我遗漏了一些显而易见但却找不到任何理解行为的东西。我有一个表，然后是一个p标签和一个div标签。所有相同级别的标签都是默认定位的。只有最后一个div中的inner-div具有绝对位置。我认为内部div中的绝对位置相对于IT的外部div（id ='outer'）绝对定位。

因此，我希望显示器按垂直顺序包含表格Text1，最后是Text2。这不是正在发生的事情。表格按预期显示，文本1也按预期显示在表格之后。但是，文本2显示在表的顶部，因为它从body标签（或最外面的标签）获取绝对位置。为什么？如何在Text1之后将Text2定位到位置。我需要将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

你是否添加了位置：相对于#outer div？

Answer 2

因为你放了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>

您可以为您的“外部”div或{inner“div”添加position:relative。

Answer 3

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

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

如果您没有为父级设置任何position值，那么div将关闭并获取与另一个父级相关的值。

将位置设置为外部div。

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

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

桌子不工作后的绝对定位？

3 个答案: