相对于包含div的绝对定位

Question

I would like to have several absolutely positioned div containers within my one larger centered "all" div that will have to have relative positioning so that it can be centered in the browser so that I have complete control over the inside div's while still being able to have a centered page. 我想在一个较大的居中“全部” div中有几个绝对定位的div容器，这些容器必须具有相对位置，以便可以在浏览器中居中，这样我就可以完全控制内部div，同时仍然能够有一个居中的页面。 I tried doing this: 我尝试这样做：

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

With this as the css: 以此作为css：

#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;
}

But yet the #header, #main and #footer were all separate and aligned to the top and to the left un-centered and completely separate from there parent div #all as #all was centered like it should be. 但是，＃header，＃main和#footer都是分开的，并与顶部和左侧对齐，并且不居中，并且与父div #all完全分开，因为#all应该居中放置。 Can someone explain why this is happening and tell me a fix? 有人可以解释为什么会发生这种情况，并告诉我解决方法吗？

Answer 1

Give #all position:relative; 赋予#all position:relative; and things should work as expected. 并且事情应该按预期进行。

相对于包含div的绝对定位

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-08-03 02:47:07

相对于包含div的绝对定位

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-08-03 02:47:07

解决方案1
3 已采纳 2012-08-03 02:47:07