Xpoint
   [напомнить пароль]

Несколько div с разными position. Как сделать один из них над всеми остальными? z-index?

Метки: [без меток]
2008-08-16 16:10:46 [обр] Владислав[досье]

Добрый день.
Пытаюсь сделать меню на div, которое было бы выше всех остальных блоков div. Position: fixed не подходит(меню не должно всегда торчать на виду!)!.
Не пойму как правильно расставить z-index и не знаю можно ли вообще сделать без z-index то, что мне нужно.

Пример:

<body>
   <div id="page">
      <div id="header">
         <div id="loginbox">Это менюшка
         </div>
      </div>
      <div id="navigation">
      </div>
      <div id="content">      
      </div>
      <div id="footer">
      </div>
   </div>
</body>

Собственно понятно, что "loginbox" и так уже над "header".
И что "loginbox" наследует все свойства "header". Но, если "loginbox" будет длинее "header", то он обрежется по вертикали :(
А как сделать что бы "loginbox" был сверху не только header, но ещё и блоков "navigation" и "content"?

Выставить z-index у header и "loginbox" выше чем у navigation и content?
Есть ли другое решение, может быть более красивое и лучшее?

Сейчас на ум приходит только переместить "loginbox" из header в "page".

Как сделали бы Вы?

спустя 1 час 40 минут [обр] Давид Мзареулян(17/1003)[досье]
Выставить логинбоксу “position: absolute”. Тогда он будет выше всех непозиционированных и никто от его размеров зависеть не будет. Ну, и для порядку — “position: relative” для хедера.
спустя 1 час 23 минуты [обр] Владислав[досье]

Добрый человек с легендарным именем, спасибо Вам огромное - получилось.

Вы правильно сказали решение.
А ещё я узнал, что не мог нормально отладить из-за этих закомментированых строк в css файле:

<!--#header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
   background-color: white;
   color: white;
} -->

Из-за этого размер "loginbox" не мог превысходить высоту "header" и обрезался.
Как только удалил эти строки и сделал как Вы сказали - сразу всё получилось.
Спасибо.

Хотелось бы узнать по второй части вопроса, а именно:
Как лучше всего делать нечто подобное? Стоит ли менюшку запихивать в header или лучше записать в page?
Стоит ли использовать z-index?(с помощью этих параметров ведь можно добиться того же самого). Как лучше?

спустя 21 час [обр] Marat Tanalin(6/78)[досье]
А ещё я узнал, что не мог нормально отладить из-за этих закомментированых строк в css файле:
HTML/XML-комментарии в CSS не действуют и являются синтаксической ошибкой.
спустя 2 часа 5 минут [обр] Давид Мзареулян(17/1003)[досье]
Как лучше всего делать нечто подобное? Стоит ли менюшку запихивать в header или лучше записать в page?

Это уже по логике вёрстки смотрите.

Стоит ли использовать z-index?(с помощью этих параметров ведь можно добиться того же самого). Как лучше?

Z-index штука хорошая, но сам по себе он не решит проблему соотношения размеров бокса и контейнера.

Powered by POEM™ Engine Copyright © 2002-2005