默认的“绝对”定位和“相对”定位

我对相对和绝对定位进行了阅读，但我仍然对选择后没有指定“顶部，左侧，右侧，底部”时会发生什么感到困惑其中一个职位。例如，在下面的代码中，我改变了容器的位置，当我将它从相对变为绝对时，页脚会做一些时髦的东西。我读过，如果你添加“position：relative”并且不指定任何方向，它就会保持原来的位置。但是使用萤火虫，我在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; 
}

与地位：相对 enter image description here

与立场：绝对 enter image description here

来源

2012-05-25 anc1revv

您需要将#footer div设置为相对位置，因为容器需要是绝对的相对位置。现在页脚不是相对的，因此#container默认为相对div最接近父页。一个经验法则是在使用绝对定位时始终使容器div为相对关系。集装箱这将是顶部0：现在

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

如果添加顶部0到页脚。

来源

2012-05-25 03:25:20 chadpeppers

乍得的答案是正确的。下面是一个解释：

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

在您的例子中，由于没有父节点设定相对或绝对定位，该节点是在关系到主体绝对的。正如Chad提到的，确保将参考节点设置为position：relative。

来源

2012-05-29 07:10:26

默认的“绝对”定位和“相对”定位

回答

相关问题