Нижний колонтитул CSS

Question

Я искал интернет и не могу найти что-нибудь, что работает здесь.

Мой нижний колонтитул скрывает мое основное содержание, похоже, в каждом браузере, но firefox. Я хочу, чтобы мой нижний колонтитул остался позади моего основного контента. Сайт, который я делаю, является эластичным и предназначен для установки в окне браузера без прокрутки, поэтому я не уверен, что липкий нижний колонтитул - это то, что я ищу. Вот почему у меня на границе нижнего колонтитула значение отрицательное. Я хочу сконденсировать страницу с нижним колонтитулом за черным ящиком.

Here's a jsFiddle demo и вот что я хочу, чтобы это выглядело как:

Answer 1

Попробуйте использовать свойство Z-индекс. Смотрите этот обновленный jsFiddle

Answer 2

Вы можете использовать Z-Index контролировать порядок элементов. Добавить z-index: -1; Вот результат того, что вы ищете. http://jsfiddle.net/bd7Vy/3/

footer { 
    clear: both; 
    position: relative; 
    margin: -5em; 
    padding-top: 4em; 
    color: black; 
    width: inherit; 
    height: 3.2em; 
    background-color: #917266; 
    background-repeat: repeat-x;* 
    z-index:-1; 
}