Проблема позиционирования CSS с: после псевдоэлемента - PullRequest
Новая
       28

Проблема позиционирования CSS с: после псевдоэлемента

1 голос
/ 11 декабря 2011

РЕДАКТИРОВАТЬ: Пример Tinkerbin, расположенный в комментариях.

Проблема, с которой я сталкиваюсь, связана с фиксированной верхней панелью, идущей за ползунком (сейчас там только один слайд для тестирования).Это происходит потому, что светло-зеленый фон, используемый для контура заголовка, создается с использованием псевдоэлемента: after в классе .page-header, например, так (используя SASS): 

.page-header {
    position: relative;
    z-index: 0;
    padding: 35px 0;
    &:after {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        height: 400px;
        border-bottom: 5px solid $white;
        z-index: -1;
    }
}

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

.nav-cont {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    height: 40px;
    z-index: 9999;
}

Не стесняйтесь взглянуть на демонстрационный сайт и дайте мне знать, если у вас есть какие-либо идеи.Я просматривал справки Криса Койера вместе с некоторыми другими, и просто не могу найти решение.

Заранее спасибо всем, кто могбыть в состоянии взглянуть на это!

1 Ответ

0 голосов
/ 11 декабря 2011

Я понял это.

.nav-cont - это потомок header, и из-за странных потребностей z-index в фоновом режиме его затягивают под слайд-шоу.z-index является относительным, поэтому при высоком z-index навигация может быть только самой высокой вещью в header, который был под слайд-шоу.

Перемещение .nav-cont из headerи предоставление ему высокого z-индекса решает эту проблему.Кроме того, строго говоря, семантически навигация принадлежит элементу <nav>.

Исправленный пример

...