我有以下的测试页面:
section元素是块元素。据我所知，块元素采用可用的全部宽度。但在这种情况下似乎不是这样。为什么?
我可以很容易地通过设置宽度或左+右属性来解决这个问题。但是我想了解为什么这个block元素的行为不同。如果我把位置切换到静态。它占用整个宽度。
<!DOCTYPE html>
<head>
<title>position</title>
<style>
.element {
position: absolute;
top: 10px;
left: 500px;
}
</style>
</head>
<body>
<main>
<article>
<section class="element">
<h2>element (absolute)</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum.</p>
</section>
</article>
</main>
</body>
</html>
在规范中，您可以找到定义position:absolute元素宽度的规则。
在你的例子中，你只定义了left，所以你符合这个规则:
'width'和'right'为'auto'且'left'不是'auto'，则width为shrink-to-fit。然后求"right">
然后
那么收缩到适合的宽度是:min(max(首选最小宽度，可用宽度)，首选宽度)。
shrink-to-fit算法与用于inline-block元素、table元素、float元素等的算法相同
注意display:block在这里不起作用，因为position:absolute默认情况下将block作为显示的计算值。更多细节在这里:https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo