今天在学习《精通css》时碰到一个问题，第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中，为了创建导航条的下拉菜单，文中提到的方法是：先设置下拉菜单的position：absolute（注意：此时父级并没有设置position），然后用left:-999em将下拉菜单隐藏到屏幕左边，然后在父列表项中添加鼠标悬停伪选择器，ul li:hover ul{left:auto}，这样，当鼠标移动到父列表项时，就会在合适的位置出现下拉菜单。
html：
1 <ul class="nav"> 2 <li><a href="#">111</a></li> 3 <li><a href="#">222</a> 4 <ul> 5 <li><a href="#">21</a></li> 6 <li><a href="#">22</a></li> 7 </ul> 8 </li> 9 <li><a href="#">333</a></li> 10 <li><a href="#">444</a></li> 11 </ul>
css:
1 *{ 2 margin:0; 3 padding: 0; 4 } 5 .nav,.nav ul{ 6 list-style-type: none; 7 float: left; 8 background-color: #8BD400; 9 border:1px solid #486B02; 10 text-align: center; 11 } 12 .nav{ 13 margin:1em; 14 /* padding: 1em; */ 15 } 16 .nav li{ 17 float: left; 18 width: 8em; 19 } 20 .nav li ul{ 21 width: 8em; 22 position: absolute; 23 left: -999em; 24 } 25 .nav li:hover ul{ 26 left: auto; 27 }
至此，一个用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值，可以自己试验一下。
他总结的一句话挺好的“例如一个div中有个absolute属性元素，其没有left或是top值，其会像个普通的inline-block属性元素一样静静地呆在这个div 里面，但是一旦设置了left:0;top:0;对不起，这个absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。”。
欢迎各位指教，不胜感激！
