为什么这个 DIV 会下移 HTML 内容？答案

【问题标题】：Why does this DIV move HTML content down?为什么这个 DIV 会下移 HTML 内容？
【发布时间】：2013-02-26 07:28:20
【问题描述】：

我有一个 DIV，我想将它插入到我的 HTML 内容中。每当我这样做时，内容都会从 DIV 将出现在内容中的位置向下移动。它向下移动 div 的高度。我坐在“会出现”，因为它的位置设置为相对。

这是一些代码：（我的意思是带有ID="pop"的那个DIV

<table border="0" align="center">
  <tr>
    <td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div>
<div class="nav_container" id="nav_container">
   <div id="nav_container2" style="position: relative; left: 0%; top: 13%;">
       HERE IS ALL THE CONTENT

还有一些 CSS：

nav_container{
width:720px;
height:180px;
background-image:blablabla;
}

如果您需要更多信息，请告诉我，我会更新此 Q。

虽然我实际上可以将 div ('pop') 定位在我想要的位置，但内容向下移动，但我不希望内容向下移动。我的意思是，一切看起来都不错，除了内容全部向下移动了 52 像素。

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

如果我理解正确，您希望 DIV 出现在其余内容之上，完全独立于您网站的其余部分。为此，您需要设置position: absolute 而不是position: relative。 relative 基本上允许从其原始位置移动元素，但该元素占用的空间仍然存在，这就是为什么在您的情况下所有内容都向下移动的原因。

如果您申请position: absolute 元素将被从页面流中取出，并且以下元素不应向下移动。但是你可能需要确保 DIV#pop 在正确的上下文中移动，但这是以后要担心的事情；）

希望我的解释有道理，但你也可能会发现这个this link useful

【讨论】：

【解决方案2】：

你描述的是position: relative的预期行为。

我不确定您想要实现什么，但请尝试将包装器放在 pop 之外，并使用 position: relative 并提供 pop position: absolute。这应该使您能够在不移动其余内容的情况下移动pop。

如果您只使用position: absolute，则定位将相对于视口的左上角，而不是相对于可能不是您想要的表格的位置。

【讨论】：

【解决方案3】：

您必须将位置设置为“绝对”才能将 div 放置在您想要的任何位置（以及使用 z-indexes 的能力）。

【讨论】：

【解决方案4】：

尝试在 CSS 下方添加或尝试减小您为 div 指定的顶部尺寸，例如 top:100px

  <style type="text/css">
    #pop
    {
       display:inline;
    }
  </style>

【讨论】：