Css 为什么我的固定div一边不服从我的包装？

出于某种原因，我在网站顶部的固定div决定忽略我的包装器并向右移动

这是我的固定div和包装器的CSS代码：

div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: fixed;
width: 100%;
z-index: 1;}

#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;}

---

这就是它看起来的样子。

好的，看起来你的

。颜色变换器在你的包装外面溢出了。只需使用
溢出：隐藏

下面是CSS的外观：

#wrapper {
  width:1000px;
  margin: -10px auto;
  background-color: #78ad00;
  overflow:hidden; }

div.colorChanger {
  background-color: #0f4a1d;
  padding: 0.5%;
  position: absolute; // not 'fixed'
  width: 100%;
  z-index: 1;}

#wrapper {
  width: 1000px;
  margin: -10px auto;
  background-color: #78ad00;
  position: relative;
  overflow: hidden; }

编辑：固定位置
我注意到您在
.colorChanger
上使用了
位置：fixed
。溢出到具有固定位置的元素，因此您可以将其改为
position:absolute

您的代码应该如下所示：

#wrapper {
  width:1000px;
  margin: -10px auto;
  background-color: #78ad00;
  overflow:hidden; }

div.colorChanger {
  background-color: #0f4a1d;
  padding: 0.5%;
  position: absolute; // not 'fixed'
  width: 100%;
  z-index: 1;}

#wrapper {
  width: 1000px;
  margin: -10px auto;
  background-color: #78ad00;
  position: relative;
  overflow: hidden; }

另一种固定的宽度
就像我说的，
overflow:hidden
不适用于
fixed
元素。另一种方法是只使用固定宽度：

div.colorChanger {
  ...
  width: 1000px;
  box-sizing: border-box; }

如果你在这里提供了一个带有解释的代码，而不是简单地说“决定忽略”你的网站看起来不错，这将不是一个愚蠢的问题。哪个div没有在听？？？@Mr.Alien我添加了一些代码。@在顶部对colorChanger div进行了修改。@PsichoLogique查看编辑。起初我没有注意到
固定的
定位。我尝试了两种解决方案，但都没有改变任何东西。现在它不会溢出，但也不会像我希望的那样随滚动移动。我将位置从“绝对”更改为“固定”，并同时使用了您的解决方案，效果很好！