Отзывчивый фоновое изображение накладками содержание

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 для г-индекса на работу.

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