Html 相对于包含div的绝对定位_Html_Css_Layout_Positioning

Html 相对于包含div的绝对定位

html css layout

Html 相对于包含div的绝对定位,html,css,layout,positioning,Html,Css,Layout,Positioning,我希望在一个较大的居中“all”div中有几个绝对定位的div容器，这些容器必须具有相对定位，以便它可以在浏览器中居中，这样我就可以完全控制内部div，同时仍然能够拥有居中的页面。我试着这样做： <body> <div id="all"> <div id="header"></div> <div id="main"></div> <div id="footer"></div>

我希望在一个较大的居中“all”div中有几个绝对定位的div容器，这些容器必须具有相对定位，以便它可以在浏览器中居中，这样我就可以完全控制内部div，同时仍然能够拥有居中的页面。我试着这样做：

<body>
  <div id="all">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
  </div>
</body>

但是#页眉#main和#页脚都是分开的，并与顶部和左侧对齐，没有居中，完全与父div分开#all as#都应该居中。有人能解释一下为什么会发生这种情况并告诉我解决方法吗？

给出

#所有位置：相对，事情应该按预期进行。
给出#所有位置：相对并且事情应该按预期进行。
这是因为绝对值
基于最近的相对值
父项。如果没有父母是相对的，那么绝对的是基于浏览器窗口的。@分号你应该觉得很聪明，因为现在你知道相对和绝对的定位了！在一个完全解释的问题上做得很好。@TLS哈哈，谢谢你，我想这是真的：D哦，我认为这比添加位置更复杂：相对；所以我一定要充分解释question@semicolon你解释得很好，你的问题实际上已经有了答案。这是因为absolute
是基于最接近的relative父项的。如果没有父母是相对的，那么绝对的是基于浏览器窗口的。@分号你应该觉得很聪明，因为现在你知道相对和绝对的定位了！在一个完全解释的问题上做得很好。@TLS哈哈，谢谢你，我想这是真的：D哦，我认为这比添加位置更复杂：相对；所以我一定要充分解释question@semicolon你解释得很好，你的问题实际上已经有了答案。
#all
{
  background-color:#ffffff;
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  height:1300px;
}

#header
{
  background-color:#ff0000;
  position:absolute;
  top:0px;
  left:0px;
  width:1000px;
  height:200px;
}

#main
{
  background-color:#00ff00;
  position:absolute;
  top:200px;
  left:0px;
  width:1000px;
  height:1000px;
}

#footer
{
  background-color:#0000ff;
  position:absolute;
  top:1200px;
  left:0px;
  width:1000px;
  height:100px;
}