Question

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

以下是一些代码:(我认为这是一个ID="pop"

<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'）放在我想要的位置，但我不希望内容向下移动。我的意思是，一切看起来都不错，除了内容全部向下移动52px。

由于

Answer 1

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

如果您应用position: absolute元素将从页面流中取出，并且以下元素不应向下移动。但是，你可能需要确保DIV＃pop在正确的上下文中移动，但稍后会担心;）

希望我的解释有道理，但您也可能会找到this link useful

Answer 2

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

我不确定您要实现的目标，但尝试将pop放在position: relative之后，并pop position: absolute。这应该使您能够在不移动其余内容的情况下移动pop。

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

Answer 3

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

Answer 4

尝试添加以下css或尝试减少您为div指定的最大尺寸，例如 top：100px

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

为什么这个DIV会移动HTML内容？

4 个答案: