设置position:fixed后#wrapper元素背景色不显示问题咨询

嘿，我来帮你排查这个问题～当你给#wrapper加上position: fixed之后背景色消失，大概率是下面两个常见原因之一：

1. 元素高度塌陷 #

固定定位的元素脱离了正常文档流，如果它没有明确设置高度，且内部没有足够的内容撑开容器，元素的高度会默认变成0，背景色自然就看不到了。

解决办法：给#wrapper设置明确的高度值，比如：

// 让容器占满整个视口高度
document.getElementById("wrapper").style.height = "100vh";
// 或者根据你的布局需求设置具体高度，比如"600px"

如果你的容器需要根据内部内容自适应高度，那得确保内部元素有明确的高度或者能正常撑开空间。

2. 层级被其他元素覆盖 #

如果页面中存在其他使用relative/absolute/fixed定位的元素，它们的z-index值比#wrapper高的话，就会把#wrapper完全盖住，导致背景色无法显示。

解决办法：给#wrapper设置一个足够高的z-index值，确保它处于页面上层：

document.getElementById("wrapper").style.zIndex = "999";

结合你的现有代码，调整后的完整设置可以是这样：

winWidth = window.innerWidth || document.body.clientWidth;
headMarg = (winWidth - 636) / 2;
document.getElementById("header").style.transform = "translate(" + headMarg + "px,10px)";
document.getElementById("wrapper").style.width = winWidth;
document.getElementById("wrapper").style.position = "fixed";
// 新增高度设置
document.getElementById("wrapper").style.height = "100vh";
// 新增层级设置
document.getElementById("wrapper").style.zIndex = "999";
document.getElementById("content").style.width = winWidth * 2 / 3 + "px";

你可以先试试这两个方案，一般就能解决问题啦～

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