CSS：position属性sticky与fixed的宽度表现差异原因

场景代码 #

CSS代码

.page-header {
    position: sticky;
    top: 20;
    background-color: red;
    color: white;
    padding: 15px;
}

HTML代码

<header class="page-header">
  <span>Header - make me into a sticky header</span>
</header>

差异原因 #

核心是两种定位的元素在文档流中的角色和盒模型行为完全不同：

• sticky定位：元素本质仍属于正常文档流，只是滚动到触发条件时切换为固定状态。作为块级元素的<header>，默认会自动填充父容器的宽度（即100%父容器宽度），这个特性不会因为sticky定位而改变，所以头部会占满宽度。
• fixed定位：元素会完全脱离文档流，定位基准切换为浏览器视口。此时元素的默认宽度会变成"收缩包裹"模式，也就是仅适配内部内容的宽度，不再继承父容器的宽度，所以头部只会和里面的文字一样宽。

如果想让fixed定位的头部也占满100%宽度，手动加width: 100%或者left: 0; right: 0就能实现。另外提个小细节：代码里的top: 20缺少单位，应该写成top: 20px，否则浏览器可能无法正确识别这个定位值。

内容的提问来源于stack exchange，提问作者seventeen