html - 响应式背景图像覆盖内容

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

您需要添加 position:relative 到 #content 元素，z-index 才能正常工作。

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