Z-индекс не ведет себя должным образом с абсолютным позиционированием внутри элемента фиксированного положения

у меня есть ситуация, когда у меня есть 2 или более фиксированных элементов позиции на странице, отображающей сложенные один поверх другого (то есть верхняя часть второго примыкает к нижней части первого - нет Z-индекса укладки этих элементов). Внутри первого элемента фиксированной позиции есть абсолютно позиционированный элемент, который выше своего фиксированного родителя, поэтому он выходит за пределы нижней части этого фиксированного родителя.

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

чтобы помочь прояснить проблему, я собрал этот пример:

HTML-код 

<div class="fixed first">
    <p>This is a fixed element</p>
    <p class="abs">
        I should be displayed above both fixed position elements
    </p>
</div>
<div class="fixed second">
    <p>This is a fixed element</p>
</div>

в CSS 

.fixed {
    font-size: 16px;
    background: #eee;
    border-bottom: 1px solid #ccc;
    position: fixed;
    height: 3em;
    width: 100%;
    z-index: 1;
}

.abs {
    position: absolute;
    background: #acc;
    height: 6em;
    top: 0;
    left: 25%;
    width: 50%;
    z-index: 2;
}

.second {
    top: 3.0625em;
}

вот рабочий пример на JSFiddle:

http://jsfiddle.net/GS4E4/8/

Я немного озадачен этим. У кого-нибудь есть объяснение, почему это происходит, и способ обойти это?

6
css css-position z-index

2 ответов

как намекает комментарий Пита, все сводится к контекстам укладки. В этом случае оба .fixed элементы создают свои собственные контексты укладки в силу того, что position: fixed;. Дитя первого .fixed элемент создает контекст укладки вложенные в рамках своего родителя. Поскольку он вложен в существующий контекст стекирования, он никогда не может вырваться и стекаться выше; его z-индекс теперь относительно его родителя.

спецификация на самом деле несколько полезна с подробности:http://www.w3.org/TR/CSS2/visuren.html#z-index. Вы можете видеть через нумерованный список, что дочерние контексты укладки окрашены мертвыми последними.

Итак, в вашем случае, ваш .fixed.first элемент должен иметь Z-индекс 2 для его дочернего элемента для стека поверх .fixed.second.

5

переместить .abs вне обоих divs.

<div class="fixed first">
    <p>This is a fixed element</p>   
</div>
<div class="fixed second">
    <p>This is a fixed element</p>
</div>
<p class="abs">
        I should be displayed above both fixed position elements
    </p>

см.http://jsfiddle.net/GS4E4/9/ Так, как сейчас .abs расположен относительно .сначала так будет сидеть сверху .сначала, но не выше .во-вторых, ваша скрипка правильно интерпретирует.

1