Прокручиваемое тело * под * прозрачным заголовком div? - PullRequest
Новая
       15

Прокручиваемое тело * под * прозрачным заголовком div?

0 голосов
/ 31 марта 2011

Я пытаюсь добиться прокрутки тела с фиксированным заголовком и фиксированной боковой панелью.Я думаю, что я почти там, за исключением того, что тело прокручивает поверх заголовка.Я хотел бы просто увеличить z-индекс заголовка по отношению к телу, но это не работает, поскольку заголовок в основном прозрачный.

Вот сайт: ссылка

Есть идеи?Спасибо

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

Ответы [ 2 ]

1 голос
/ 31 марта 2011

Вот ваш код: 

#thebody {
    display:inline-block;
    position:relative;
    width:984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    font-size:24px;
    text-align:center;
    height:100%;
    z-index:-1;
}

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
}

То, как работает z-indexs, все, что нужно включить в наслоение, также должно иметь набор z-index.Итак, в вашем коде прямо сейчас установлено только #thebody.Добавьте это к #theheader: 

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
    z-index: 10;  /* addition */
}

Это ставит #theheader над #thebody.Удачи, и дайте мне знать, если у вас есть вопросы.

1 голос
/ 31 марта 2011

Используйте то же фоновое изображение для вашего тела и заголовка, но с background-position:fixed. Таким образом, заголовок будет иметь непрозрачность для содержимого, чтобы прокручиваться внизу и быть скрытым. Использование фиксированного положения гарантирует, что эти два изображения выглядят без шва.

Что касается примечания, я не могу просмотреть всю боковую панель на вашем сайте, вы можете пересмотреть использование такой жесткой компоновки.

...