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

Question

出于某种原因，我网站顶部的固定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;}

而here就是它的样子。

Answer 1

好的，看起来你的.colorChanger溢出了你的包装器。只需使用overflow: hidden。

这就是CSS的样子：

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

编辑：固定位置

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

您的代码应如下所示：

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; }