html - div "margin-top"是相对于 body 而不是父 div

Question

我页面的 HTML:

#header {
  background-color: #0cf;
  border: 1px solid black;
  height: 20%;
  width: 100%;
}

#menu {
  background-color: #ff0;
  color: black;
  font-size: 1.5em;
  height: 29%;
  width: 70%;
  margin-top: 9%;
}

<div id="header">
  <div id="menu">
    this is menu
  </div>
</div>

问题是“#menu”相对于“body”元素有边距，我希望它的边距相对于“#header”。

您可能会看到我在这里创建了一个流畅的网格，我的“#menu”div 的边距应该相对于“#header”，否则它将不起作用(参见屏幕截图)。

这是截图。第一个分辨率为 1024*768。

其次是1280*1024分辨率

在第二张截图中，“#menu”距离“#header”的底部有点高。

我的问题是如何应用随着“#header”的高度变化而变化的边距？

我已经读过有关“边距折叠”的内容，但我不认为这是这里发生的事情，因为我的父 div 有边框。

Answer 1

您在 #menu { margin-top: 9%; 中使用的 9%； 表示文档大小的 9%，即所有最大浏览器窗口。

对#header 和#menu 使用position:relative。然后将 top:9% 给 #menu 。