CSS позиционирование (z-index) элемент за элементом - PullRequest
Новая
       43

CSS позиционирование (z-index) элемент за элементом

2 голосов
/ 25 августа 2011

Я пытаюсь сделать следующий макет HTML / CSS:

http://siteique.com/uploads/1.png http://siteique.com/uploads/1.png.

Моя проблема с синими линиями позади основного div. 

<div id="container">
    <!-- blue line 1 -->
    <div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"></div>

    <div id="site">
    </div>

    <div id="footer">
        <!-- blue line 2 -->
        <div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"></div>
    </div>
</div>

Проблема в том, что если я сделаю #site div position:absolute и z-index:2, то #footer не окажется в желаемой позиции.

Так какой же трюк мне нужен?

Я пытаюсь расположить синие div позади белых div #site

1 Ответ

4 голосов
/ 25 августа 2011

Проблема в том, что если я сделаю #site position:absolute и z-index:2…

Если вы просто хотите повлиять на контекст стека, добавив новый слой, position: relative; будетбыть подходящим и поддерживает элемент в рабочем состоянии.

Обратите также внимание, что "синяя линия 2" имеет другой контекст размещения, чем "синяя линия 1", потому что первый вложен в еще один слой (#footer)затем последний.

См. также:

...