CSS：带有页脚背景颜色的侧边栏div透明度问题

Question

我的侧边栏上有透明度问题，页脚背景颜色。你可以在它下面看到它：

我尝试设置z-index但它没有工作，我只能在侧边栏上设置一些颜色。它需要是一个渐变...

我该如何处理这个问题？

header
{
  display: block;
  width: 300px;
  float: left;
  z-index: 4;
  position: fixed;
  height: 100%;
  background: -moz-linear-gradient(left,  rgba(255,255,255,0) 19%, rgba(255,255,255,0.03) 41%, rgba(0,0,0,0.11) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(19%,rgba(255,255,255,0)), color-stop(41%,rgba(255,255,255,0.03)), color-stop(100%,rgba(0,0,0,0.11)));
  background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 19%,rgba(255,255,255,0.03) 41%,rgba(0,0,0,0.11) 100%);
  background: -o-linear-gradient(left,  rgba(255,255,255,0) 19%,rgba(255,255,255,0.03) 41%,rgba(0,0,0,0.11) 100%);
  background: -ms-linear-gradient(left,  rgba(255,255,255,0) 19%,rgba(255,255,255,0.03) 41%,rgba(0,0,0,0.11) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,0) 19%,rgba(255,255,255,0.03) 41%,rgba(0,0,0,0.11) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1c000000',GradientType=1 );
}
#container
{
  height: 100%;
  transition: all 0.17s ease-in-out;
  -moz-transition: all 0.17s ease-in-out;
  -webkit-transition: all 0.17s ease-in-out;
  -o-transition: all 0.17s ease-in-out;
}

#content
{
  position: relative;
  padding-left: 300px;
  height: 100%;
}
footer
{
  clear: both;
  color: white;
  background-color:#333333;
  padding: 10px 10px 10px 300px;
  letter-spacing: 0;
}

HTML：

<footer>
  <div class="container">
    <div class="row">
    <div class="col-sm-3">
      ...
    </div>
    <div class="col-sm-3">
     ...
    </div>
    </div>
  </div>
</footer>