响应式背景图片覆盖内容

Question

我有以下代码： http://jsfiddle.net/xyoes1wy/

我遇到问题，footer中的图片覆盖了我的主体内容。是什么造成的？我该如何解决这个问题？

CSS：

.container {
    background-image:url('http://www.imagesman.com/wp-content/uploads/2015/01/Landscape-wallpapers-1.jpeg');
  background-size:100%;
  position: absolute;
  width:100%;
  height:100%;
  bottom: 0;
  left: 0;
  background-position:bottom center;
  background-repeat:no-repeat;
}

#content {
    z-index:2;
    height:700px
}

Answer 1

您需要添加位置：相对于#content元素，z-index才能工作。

#content {
    position:relative;
    z-index:2;
    height:700
}

Answer 2

试试这个Fiddle 我已经从标题和内容包装器中删除了两个.container，因为您通常不希望以绝对元素显示内容。如果你想定位它，你仍然可以放入一个相对块并设置它的顶部/左侧属性。

.container {
    background-image:url('http://www.imagesman.com/wp-content/uploads/2015/01/Landscape-wallpapers-1.jpeg');
    background-size:100%;
    position: absolute;
    width:100%;
    height:100%;
    bottom: 0;
    left: 0;
    background-position:bottom center;
    background-repeat:no-repeat;
}

#content {
    position:relative;
    z-index:2;
    height:100%
}

footer {
    position: relative;
    height: 400px;
}