关于position:absolute的困惑

　　今天在学习《精通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值，可以自己试验一下。

　　另外还有张鑫旭的一篇文章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定位）。”。

　　欢迎各位指教，不胜感激！