使用position:fixed属性时如何让元素宽度为父元素的百分比？

设置了position: fixed的元素默认脱离普通文档流，定位和尺寸计算的基准是浏览器视口，而非普通流中的父元素。因此你给h3设置width: 98%时，是按整个视口宽度的98%渲染，才会出现宽度占满整页、不符合预期的问题。

优先使用第一种方案，实现简单无额外计算成本，可自动适配父元素动态宽度场景：

• 方案1：给父级post_creation创建固定定位包含块
  给.post_creation添加transform: translate(0)属性（该属性无任何视觉副作用，会触发浏览器将其作为内部fixed定位子元素的尺寸、位置计算基准），此时h3的百分比宽度会自动参考post_creation的宽度计算，固定定位的位置也会相对父级生效。
  完整CSS代码：

.parent {
  height: 200vh;
  width: 400px;
}

.post_creation {
  transform: translate(0);
}

h3 {
  position: fixed;
  top: 0; /* 可自行调整固定后距离顶部的间距，比如top: 12px */
  width: 98%;
  margin: 0; /* 重置h3默认外边距，避免位置偏移 */
}

原有HTML结构不需要任何修改，即可实现滚动时h3始终可见、宽度为父级98%的效果。

• 方案2：手动指定尺寸和偏移（无法修改父元素属性时使用）
  如果业务场景不允许给父元素添加transform属性，可以手动匹配h3的宽度和位置：静态宽度场景直接写死计算值，动态宽度场景可以通过JS实时获取父元素的宽度、左偏移值，更新到h3的样式上即可。
  静态场景示例CSS（假设父级400px宽、页面居中）：

.parent {
  height: 200vh;
  width: 400px;
  margin: 0 auto;
}

h3 {
  position: fixed;
  top: 0;
  width: 392px; /* 400px * 0.98 */
  left: calc(50vw - 200px); /* 对齐居中父容器的左边缘 */
  margin: 0;
}

补充：如果不需要h3在滚动到post_creation容器外之后仍然保持固定，可以直接用position: sticky实现，不需要处理定位上下文：给h3设置position: sticky; top: 0; width: 98%即可，sticky元素天然参考父元素计算尺寸，实现更简单。

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