Html 违约；绝对的；定位及；相对的；定位

我仔细阅读了相对和绝对定位，但我仍然不清楚在选择一个位置后，如果不指定“上、左、右、下”会发生什么。例如，在下面的代码中，我更改了容器的位置，当我将其从相对更改为绝对时，页脚会做一些奇怪的事情。我读到，如果你加上“位置：相对”，而不指定任何方向，它只会停留在原来的位置。但是使用firebug，我在css中切换了这一行，顶部的菜单栏会稍微向左移动。发生了什么事

HTML:

位置：相对

位置：绝对

您需要将#footer div设置为相对位置，因为容器需要绝对到相对位置。现在，页脚不是相对的，因此#容器默认为最接近父级的相对div。经验法则是，在使用绝对定位时，容器div始终是相对的

#footer {position: relative; }
#container { position: absolute; }

---

现在，如果您将top:0添加到容器中，那么它的页脚将是top:0。

Chad的答案是正确的。这里有一个解释：

将div设置为使用绝对位置将使其相对于位置为绝对或相对的第一个父节点是绝对的

在您的示例中，由于没有将父节点设置为相对或绝对位置，因此该节点相对于主体是绝对的。如前所述，确保将引用节点设置为位置：相对

@charset "UTF-8";  
/* Background-Styles */  

body {  
    margin:0px; padding:0px;  
    background-color:#131211;  
 }  
#main {  
    background:#c4c0be url(images/background_light_slice.jpg) repeat-x;  
}   
#main .container {  
    background-image:url(images/background_light.jpg);    
    background-repeat:no-repeat;  
    min-height:400px;  
}  

#header {  
    padding-top:20px;  
 }  
#logo h1, #logo small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px;  
}  
#logo {  
    background-image:url(images/logo.png);  
    background-repeat:no-repeat;
    width:194px;  
    height:83px;  
}  
ul#menu {  
    margin:0px; padding:0px;  
    position:absolute;  
    right:0px;  
}  
ul#menu li {  
   display:inline;   
}




#footer {  
    background-image:url(images/background_footer.jpg);  
    background-repeat:repeat-x;  
    color:white;  
    padding:40px;  
}  
.container {  
    width:950px;  
    margin:0 auto;  
    position:relative;  
}

#footer {position: relative; }
#container { position: absolute; }