“绝对”定位和“相对”定位的默认值答案

【问题标题】：Default of "absolute" positioning and "relative" positioning“绝对”定位和“相对”定位的默认值
【发布时间】：2012-05-31 15:52:30
【问题描述】：

我阅读了相对定位和绝对定位，但我仍然对在选择其中一个位置后不指定“上、左、右、下”时会发生什么感到困惑。例如，在下面的代码中，我更改了容器的位置，当我将其从相对更改为绝对时，页脚做了一些时髦的事情。我读到如果您添加“位置：相对”并且不指定任何方向，它就会完全停留在它应该在的位置。但是使用萤火虫，我在css中切换了那条线，顶部的菜单栏会向左移动一点。怎么回事？

HTML：

    <div class="container">

        <div id="header">

            <ul id="menu">
                <li><a href="#" class="active">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Request a Quote</a></li>
            </ul>       

            <div id="logo">
                <h1>Creatif</h1>
                <small>A Family of Rockstar Wordpress Themes
            </div>
        </div><!--end header-->

        <div id="block_feature">
        Featured Content
        </div>      

        <div id="block_content">
        Content

        </div>

    </div>

</div>


<div id="footer">

    <div class="container">
        Footer stuff goes here
    </div>
</div>

CSS：

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

与位置：相对

与位置：绝对

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

乍得的回答是正确的。这是一个解释：

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

在您的示例中，由于没有将父节点设置为相对位置或绝对位置，因此该节点与主体的关系是绝对的。正如乍得提到的，确保将参考节点设置为位置：相对。

【讨论】：