关于position:absolute的困惑

  今天在学习《精通css》时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的position:absolute(注意:此时父级并没有设置position),然后用left:-999em将下拉菜单隐藏到屏幕左边,然后在父列表项中添加鼠标悬停伪选择器,ul li:hover ul{left:auto},这样,当鼠标移动到父列表项时,就会在合适的位置出现下拉菜单。

  html:

 <ul class="nav">
<li><a href="#">111</a></li>
<li><a href="#">222</a>
<ul>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
</ul>

  css:

  

        *{
margin:;
padding:;
}
.nav,.nav ul{
list-style-type: none;
float: left;
background-color: #8BD400;
border:1px solid #486B02;
text-align: center;
}
.nav{
margin:1em;
/* padding: 1em; */
}
.nav li{
float: left;
width: 8em;
}
.nav li ul{
width: 8em;
position: absolute;
left: -999em;
}
.nav li:hover ul{
left: auto;
}

  至此,一个用css做的下拉菜单算是大功告成了,那么,真相是怎样的呢?

  上面例子中,下拉菜单的position为absolute,但是他的上级并没有设置position,而且他只设置了left:-999em,那么,他是怎么显示的呢?为什么当鼠标移动到父列表项时,将left改为auto后,他能在正确的位置出现呢?如果给他或父级设置padding和margin又会怎么样呢?给他本身设置padding和margin呢?

  在知乎找到一篇相关的文章:http://www.zhihu.com/question/20109535有如下的答案:  

  "1.如果position: absolute 元素未赋予 left、top实际值,那么其值为auto
  2.“auto”与“0”在父级元素没有padding值的情况下,表现一样"

  "这个div嵌套在body里面,如果不给img设置left和top等值的话,它就相当于没有宽度的浮动元素。如果设置了top和left等值的话,那么它就会去找position为非static得元素做为containing box.这里是body。"

  如果下拉菜单的li只给left,top,right,bottom中的其中一个值又会有怎样的效果呢,正如上例中的一样,只给了left值,可以自己试验一下。

  另外还有张鑫旭的一篇文章http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/

  他总结的一句话挺好的“例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div 里面,但是一旦设置了left:0;top:0;对不起,这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。”。

  欢迎各位指教,不胜感激!

上一篇:[linux]查看文件编码和编码转换


下一篇:FCC(ES6写法)Pairwise