Прозрачный заголовок переполнен основным div

Я искал ответ на этот вопрос по всей сети, но я просто не могу найти ответ... У меня есть прозрачный заголовок, заполненный фоновым изображением, которое совпадает с моим фоном, и я хочу, чтобы мой основной div прокрутить под ним, чтобы текст был скрыт. Вот HTML-код:

<body>
    <div class="wrapper">
    <div class="top">
    <!-- This is my header -->
    </div>
    <div class="main">
    [.....]
    </div>

А вот и CSS:

.top {
    background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
    margin-top:0px;
    height:100px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:central;
    padding-left:0px;
    padding-right:opx;
}

.main {
    position:absolute;
    top:100px;
    bottom:20px;
    left:0;
    right:0;
    width:990px;
    margin:0 auto;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    z-index:-1;
}

Я сделал jsFiddle, который можно найти здесь: http://jsfiddle.net/qcaJJ/. Можете ли вы помочь мне, как заставить это работать? Заранее спасибо!

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

имп. Если кто-нибудь знает способ оставить навигацию на своем месте и прокрутку main2 div, вы мой герой! Вроде плохо знакомы с HTML и CSS.

Источник

3 ответа

Решение

В дополнение к использованию фиксированной позиции для заголовка, как указывалось в других ответах, вы также используете фоновое изображение с прозрачностью, поэтому, когда основной раздел прокручивается внизу, вы все равно видите его. Вам нужно добавить цвет фона примерно так, чтобы убедиться, что div заголовка покрывает то, что прокручивается внизу:

.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
Источник

Смотрите мой JSFiddle здесь: http://jsfiddle.net/qcaJJ/3/

Тебе необходимо fixed позиция для вашего заголовка, а не абсолютное позиционирование для всей остальной части вашей страницы.

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:red;
}

.content{
    margin-top:100px;
    font-size:180%;
}
Источник

top должно быть position:fixed чтобы это работало. Это гарантирует, что он всегда застрял в верхней части экрана.

Вы также можете установить z-index что-то вроде 1000 так что это всегда остается на вершине всего остального.

Источник
Другие вопросы по тегам