css - 可变宽度取决于位置？

Question

如果我分配position:absolute给一个元素，它width不会根据里面的文本而变化。

另一方面，如果我分配position:relative给该元素，width则将根据里面的文本而有所不同。

在这里，我有两个菜单，每个菜单都有不同的position属性：http: //jsfiddle.net/je3PX/4/

这是什么原因？为什么要width依赖position属性？我希望使它根据文本大小而有所不同。

谢谢。

Answer 1

的默认值为，width这auto意味着它将根据需要自行适应布局。对于块级元素（display:block等），这意味着适应父容器，对于内联元素（display:inline等），这意味着适应内容。

其中的position属性因素在于该值relative不会将元素带出常规流布局，因此仍保持基本规则。该值absolute确实将其从常规流布局中取出，因此不再有父级作为宽度的基础，因此回退到适合内容。

相关规则在W3 CSS2 规范的第 10 章中定义（太长无法引用）。