设置position:fixed且width:100%的CSS元素为何宽于父元素？

问题原因 #

fixed定位的元素会脱离正常文档流，完全不受父元素的布局约束。它的width: 100%是基于浏览器视口计算的，而非父元素的内容宽度。哪怕设置width: inherit，由于fixed元素脱离了父级上下文，这个继承规则不会生效，最终导致元素宽度超过父元素。

解决方案 #

方案1：用left/right替代宽度设置（推荐）

通过left: 0; right: 0让元素铺满视口，再添加与最外层父元素一致的内边距，让内容区域和父元素对齐，同时开启box-sizing: border-box保证内边距不会额外增加元素宽度：

export default function App() {
  return (
    <div
      style={{
        width: "100%",
        padding: "0px 15px",
        boxSizing: "border-box",
        height: "80px",
      }}
    >
      <div
        style={{
          width: "100%",
          border: "1px solid blue",
          height: "80px",
        }}
      >
        <div
          style={{
            width: "100%",
            border: "1px solid transparent",
            height: "80px",
          }}
        >
          <div style={{ width: "inherit", height: "25px" }}>
            <div style={{ width: "inherit", height: "25px" }}>
              <div
                style={{
                  position: "fixed",
                  left: 0,
                  right: 0,
                  padding: "0 15px",
                  boxSizing: "border-box",
                  height: "25px",
                  border: "1px solid green",
                }}
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

方案2：用calc计算精确宽度

如果知道父元素的内边距或其他偏移值，可以直接用calc计算元素宽度，比如最外层父元素有左右15px内边距，那么fixed元素宽度设为calc(100vw - 30px)：

width: calc(100vw - 30px);
position: fixed;
left: 15px;

方案3：业务允许时改用sticky定位

如果不需要元素完全脱离文档流，只是需要滚动时固定，可以用position: sticky替代fixed，它会保留在父元素的布局流中，宽度自然继承父元素：

position: sticky;
top: 0;
width: inherit;

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