当一个元素使用 position: fixed; 定位后，它会脱离正常文档流，默认宽度不再与父元素同步，而是基于视口（viewport）进行定位。要让 position: fixed; 元素的宽度与其父元素保持一致，有几种常用的解决方法：

方法一：用 JavaScript 动态设置宽度

可以通过 JavaScript 获取父元素的宽度并设置到固定定位的元素上。例如：

const fixedElement = document.querySelector('.fixed-element');
const parentElement = fixedElement.parentElement;function setFixedWidth() {fixedElement.style.width = `${parentElement.offsetWidth}px`;
}// 设置初始宽度
setFixedWidth();// 在窗口调整大小时重新设置宽度
window.addEventListener('resize', setFixedWidth);

方法二：CSS 结合 position: sticky

如果只想在滚动时固定且在一定范围内，可以使用 position: sticky;，它会保持元素宽度与父元素一致。例如：

.fixed-element {position: sticky;top: 0; /* 距离顶部的距离 */width: 100%; /* 父元素宽度 */
}

方法三：使用 CSS 的 transform: translateY() 模拟固定定位

通过设置 position: absolute; 并使用 transform 模拟固定效果：

.parent {position: relative;
}.fixed-element {position: absolute;top: 0;left: 0;width: 100%; /* 父元素宽度 */transform: translateY( /* offset here */ );
}

这样可以让 .fixed-element 保持宽度同步。