CSS中position: fixed会使元素变为inline-block吗？fixed布局header宽度疑问

一、为什么设置fixed后header不是满宽度？ #

当元素添加position: fixed属性后，会脱离正常的文档流，不再像普通块级元素那样自动填充父容器的宽度，而是仅占据自身内容所需的空间。

要让header恢复满宽度，有两种实用方案：

• 方案1：直接设置宽度为100%，同时清除默认的内外边距避免溢出：

header{
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
}

• 方案2：通过设置左右偏移为0，强制元素拉伸至视口宽度：

header{
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    right: 0;
}

二、position: fixed会把元素变成inline-block吗？ #

不会。position: fixed并不会将元素转为inline-block类型。实际规则是：当元素设置fixed或absolute定位后，其display计算值会做对应调整：

• 如果原display是inline、inline-block、inline-table这类行内相关值，会被计算为block；
• 如果原display是表格相关类型（如table-cell、table-row），会转为对应的块级表格类型；
• 如果原display是flex、grid这类布局类型，会保持原有布局模式，但元素仍会脱离文档流，宽度默认由内容决定。

简单来说，fixed定位的元素是脱离文档流的块级化元素，和inline-block（不脱离文档流的行内块元素）的特性完全不同。

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