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

Question

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

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

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

这是什么原因？为什么 width 依赖于 position 属性？我希望使它根据文本大小而变化。

谢谢。

Answer 1

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

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

相关规则定义在chapter 10 of the W3 CSS2 specification (引用太长)。