CSS fixed定位元素继承宽度与父元素实际宽度不一致问题

问题根因 #

• 核心冲突来自element1设置的position: fixed属性：固定定位元素的包含块是视口（浏览器可视区域），而非直接父元素child。
• 你给child设置的width: 100%是相对父元素parent的百分比值，width: inherit继承的是父元素的属性声明值而非计算后的实际像素宽度，所以element1拿到的width:100%会相对视口计算，自然和child的实际宽度不符。

解决方案 #

方案1：改用absolute定位（最推荐，匹配现有布局逻辑） #

你已经给child设置了position: relative，把element1的position属性从fixed改为absolute即可。此时element1的包含块就是child，继承的width:100%也会相对child计算，直接符合预期。
修改后的CSS代码：

.element1{
  padding: 2px;
  width: inherit;
  border: solid 2px yellow;
  position: absolute;
}

方案2：必须使用fixed定位的场景 #

如果业务需求要求必须用固定定位，可以通过CSS变量传递child的宽度属性，避免继承百分比值导致计算基准偏移：

.child{
  padding: 2px;
  border: solid 2px green;
  width: 100%;
  height: 50px;
  position: relative;
  --child-width: 100%;
}
.element1{
  padding: 2px;
  width: var(--child-width);
  border: solid 2px yellow;
  position: fixed;
}

注意该场景下如果需要element1和child位置对齐，还需要额外调整top、left属性值，非必要优先选择方案1。

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