Сделать содержание DIV перекрытием колонтитулы

Question

У меня возникли некоторые проблемы с созданием этого эффекта с помощью CSS:

http://i.stack.imgur.com/sMBmg.jpg

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

Answer 1

Вот один из способов сделать это.

Если это ваш HTML:

<div class="header">Header</div> 
<div class="content">Content</div> 
<div class="footer">Footer</div> 

Примените следующий CSS:

.header, .footer { 
    height: 100px; /* not strictly needed... */ 
    border: 1px solid blue; 
} 
.content { 
    width: 50%; /* for example... */ 
    height: 400px; 
    background-color: yellow; 
    margin: 0 auto; 
    border: 1px dotted blue; 
} 
.header { 
    margin-bottom: -25px; 
} 
.footer { 
    margin-top: -25px; 
} 
.content { 
    position: relative; 
    z-index: 1; 
} 

Вы можете посмотреть демо на: http://jsfiddle.net/audetwebdesign/CNnay/

Вы создали три элемента уровня блока для заголовок, содержание и нижний колонтитул.

Применить отрицательные поля к нижней части заголовка, а верхняя часть нижнего колонтитула - создать эффект смещения.

Наконец, примените z-index к .content, чтобы настроить порядок укладки таким образом, чтобы блок содержимого был окрашен над нижним колонтитулом.

В этом макете блок содержимого будет расширяться по вертикали, когда вы добавите больше контента.

Результаты выглядит следующим образом:

Answer 2

Вы можете попробовать position:fixed или z-index:2000 вашего div класса
я создал этот http://jsfiddle.net/RVnU7/1/