0

我阅读了相对和绝对定位，但我仍然对选择其中一个位置后没有指定“上、左、右、下”时会发生什么感到困惑。例如，在下面的代码中，我更改了容器的位置，当我将其从相对更改为绝对时，页脚做了一些时髦的事情。我读到如果您添加“位置：相对”并且不指定任何方向，它就会完全停留在它应该在的位置。但是使用萤火虫，我在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;  
}

与位置：相对 在此处输入图像描述

与位置：绝对 在此处输入图像描述

4

2 回答 2

1

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

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

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

于 2012-05-25T03:25:20.473 回答
0

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

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

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

于 2012-05-29T07:10:26.210 回答