html - 为什么这个 DIV 会将 HTML 内容向下移动？

Question

我有一个要插入到我的 HTML 内容中的 DIV。每当我这样做时，内容都会从内容中出现 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;
}

如果您需要更多意见，请告诉我，我会更新此问题。

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

谢谢

Answer 1

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

如果您应用 position: absolute 元素，则该元素将脱离页面流，并且后面的元素不应向下移动。但是你可能需要确保 DIV#pop 在正确的上下文中移动，但这是稍后需要担心的事情；)

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