Как предотвратить отображение позиции: относительного элемента поверх позиции: фиксированный элемент? - PullRequest
Новая
       22

Как предотвратить отображение позиции: относительного элемента поверх позиции: фиксированный элемент?

0 голосов
/ 17 мая 2011

У меня проблема со стилем моего блога. Я хочу сделать заголовок бара 

position:fixed

Панель заголовка выглядит так: 

.blurbheader {
    position:fixed;
    padding:4px;
    width: 100%;
    height: 40px;
    margin-bottom:30px;
    color:#fff;
    background:#cc0000;
    font: 12px Helvetica, Arial, sans-serif;
    line-height:1.3em;
}

.blurbheader a {color: #fff;}

/* creates the triangle */
.blurbheader:after {
    content:"";
    position:absolute;
    bottom:-40px;
    left:210px;
    border:20px solid transparent;
    border-top-color:#cc0000;

    /* reduce the damage in FF3.0 */
    display:block; width:0;
}

Но как только я это сделаю, я сделал 2 панели навигации, которые отображаются как 

.blurb {
    position:relative;
    padding:10px;
    margin:20px 0 0.5em;
    color:#fff;
    background:#000;
    font: 11px Georgia, Geneva, "Times New Roman", times;
    line-height:1.3em;
}

.blurb a {color: #fff;}

/* creates the triangle */
.blurb:after {
    content:"";
    position:absolute;
    top:-30px; left:20px;
    border:15px solid transparent;
    border-bottom-color:#000;

    /* reduce the damage in FF3.0 */
    display:block; width:0;
}

При попытке исправить панель заголовка (blurbheader) при прокрутке это выглядит так:

альтернативный текст http://imageshack.us/m/833/6351/fixedproblem.png

Поле справа - это панель навигации, которая не будет прокручиваться под строкой заголовка. Что мне делать?

1 Ответ

1 голос
/ 17 мая 2011

Это проблема z-index.

попробуйте добавить следующее к вашему .blurbheader

 z-index:1;

и все, что удерживает остальную часть страницы, например, обертку, добавьте 

z-index:0;

это должно решить проблему

...