CSS z-index (контекст стекирования) - PullRequest
Новая
       0

CSS z-index (контекст стекирования)

2 голосов
/ 12 января 2012

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

<body>
    <header>
        <panel>
            <login>
            </login>
        </panel>
    </header>

    <content>
    </content>
</body>

Вот иерархия, которую я хочу:

  1. <panel> выше <header>
  2. <login> под обоими <header> и <panel>
  3. <login> выше <content>

Дополнительная информация:

<login> - это форма входа position: absolute, которая скользит внизиз-под <header> по требованию, но должен оставаться выше <content>

Надеюсь, вы могли бы помочь мне ..

1 Ответ

3 голосов
/ 12 января 2012

К сожалению, дочерние узлы не могут иметь z-index ниже, чем их предки.Чтобы получить желаемый эффект, вам нужно переместить login за пределы header.

Пример 

<header>
 <div class="panel"><!-- Panel Here --></div>
</header>
<div class="login"><!-- Log In Here --></div>
<div class="content"><!-- Content Here --></div>

Примечание: I 'Мы немного изменили разметку, чтобы соответствовать стандартам HTML.Если вы хотите продолжить использовать недействительную разметку, просто замените <div class="XXX"> на <XXX> и соответствующие </div> на <XXX>, где XXX - это значение атрибута class.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...