Div "Infront" Div?

Question

Я пытаюсь закодировать дизайн, который я только что сделал: http://www.richardhedges.co.uk/brlan/design.jpg

Я почти закончил кодирование, но единственное, что я не знаю, как это сделать, - это нижний колонтитул, перекрывающий основной контент. То, что я хотел бы сделать, это прокрутить содержимое. (Как и в сообщениях Facebook)

Нижний колонтитул - это просто div, в котором ничего нет:

<div class="footer"></div>

А вот таблица стилей:

div.footer {
    width: 980px;
    height: 114px;
    float: left;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

Мне нужно создать новый div, в который я включу контент (как показано в design.JPG), однако он должен быть «позади» изображения PNG в нижнем колонтитуле. Я абсолютно не знаю, как мне это сделать - мои извинения за невежество.

Answer 1

div#footer {
    position: absolute;
    bottom: 0px;
    z-index: 9001;
}
div#content {
    position: relative;
}

Answer 2

Используйте абсолютное позиционирование и более высокий z-индекс в div нижнего колонтитула, чем в тех, перед которыми он будет.