[Решено] Наложение блоков - Вопросы по CSS

Доброго времени суток. Возникла такая проблема: не получается правильно распределить уровни блоков. На самом заднем плане находится контент, чуть выше лого, выше него меню, еще выше поиск, а выше поиска должны быть выпадающие элементы меню. Но так как меню ниже поиска по z-index, то выпадающие элементы отображаются под поиском. Как исправить ситуацию? Пробовал задавать z-index для выпадающих элементов, но так как родитель ниже значением, то не прокатывает. Заранее спасибо, и вот картинка для наглядности проблемы:

Может конечно что то не понимаю, но почему бы не сделать z-index меню больше чем у поиска?

Может конечно что то не понимаю, но почему бы не сделать z-index меню больше чем у поиска?

Тогда меню перекроет поиск. Оно идет прямоугольным блоком, оно не повернуто. А элементы меню выполнены позиционированием на розовой линии. Вот так выглядит на самом деле меню:

Накидал на скорую руку.
Сделал три элемента, средний элемент повернул на 30 градусов с помощью transform:rotate, он зашел на близлежащие элементы своими углами перекрыв только места соединений.
То есть должно получится так - ставим меню z-index больше чем поиску, а поиск просто ставим на нужное место, но что бы он не соприкасался с элементом меню, от сюда и подпункты меню будут иметь z-index выше чем у поиска.

Накидал на скорую руку.
Сделал три элемента, средний элемент повернул на 30 градусов с помощью transform:rotate, он зашел на близлежащие элементы своими углами перекрыв только места соединений.
То есть должно получится так - ставим меню z-index больше чем поиску, а поиск просто ставим на нужное место, но что бы он не соприкасался с элементом меню, от сюда и подпункты меню будут иметь z-index выше чем у поиска.

А других решений нет? Я от трансформации не просто так отказался, потому что при повороте меню, оно становится пиксельным и теряет качество, а края становятся грубыми и не сглаженными. Поиск стоит там, где надо, ничего двигать нельзя, нужно чтобы все стояло там, где стоит.

если не transform:rotate то как делаете?
И все будет стоят так как показывали если трансформом воспользоваться.

если не transform:rotate то как делаете?
И все будет стоят так как показывали если трансформом воспользоваться.

Я же писал, что сделано позиционированием. Полоска меню сделана картинкой, элементы меню тоже сделаны картинками и зафиксированы позиционированием. Я пробовал трансформацией делать, говорил же как выходит.

Интересное решение, мне бы в голову не пришло наверное ))).

Можно сделать прозрачным фоном вот этот элемент в картинки - "И это тоже все блок меню".?

Интересное решение, мне бы в голову не пришло наверное ))).
Можно сделать прозрачным фоном вот этот элемент в картинки - "И это тоже все блок меню".?

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

Мне уже интересно решить задачу ))
Хорошо, а если подложку меню сделать меньшим индексом чем поиск, а сами пункты меню сделать большим, то есть по идее поиск должен встать и быть доступен в заданном месте, но не перекрывать само меню.

Мне уже интересно решить задачу ))
Хорошо, а если подложку меню сделать меньшим индексом чем поиск, а сами пункты меню сделать большим, то есть по идее поиск должен встать и быть доступен в заданном месте, но не перекрывать само меню.

Я так пробовал уже, выше об этом упоминал. То, что само меню в корне ниже индексом, влияет на последующие элементы меню.

Ну это было понятно, попробую подробнее объяснить мысль.

Полоска меню сделана картинкой, элементы меню тоже сделаны картинками и зафиксированы позиционированием.

Полоску меню сделать ниже индексом, а элементы меню сделать выше относительно поиска, по идее должно получится, что выше находятся сами пункты меню и не перекрывают поиск.

Ну это было понятно, попробую подробнее объяснить мысль.
Полоску меню сделать ниже индексом, а элементы меню сделать выше относительно поиска, по идее должно получится, что выше находятся сами пункты меню и не перекрывают поиск.

Так вот и получается, что полоска это #mainmenu и оно равно z-index:2; А элементы меню это #mainmenu ul li и равны они z-index:5; Но так как корень все же #mainmenu, то элементы перенимают все равно его индекс...

т.е. если вы задаете для #mainmenu ul ul z-index:5; он все равно равен 2? правильно я понял?

Тогда надо сделать эти элементы не дочерними а сестринскими.
Из этого:
<div class="a">
 <div class="b">
 </div>
</div>

В это:
<div class="a">
</div>
<div class="b">
</div>

Расположение этих элементов достичь так же позиционированием и для верности объединить их в один общий родительский элемент:
<div class="с">
 <div class="a">
 </div>
 <div class="b">
 </div>
</div>

@Babyaka
все должно получиться.
не назначайте z-index для родителя подменю. только для блока поиска (допустим 5) и блока подменю (допустим 6).
вот что-то подобное воспроизвел на локале. серый фон - это родительский ul

т.е. если вы задаете для #mainmenu ul ul z-index:5; он все равно равен 2? правильно я понял?

Я задаю z-index:5; для #mainmenu ul li и он все равно ниже поиска стоит, хотя FireBug показывает z-index:5;, а у поиска z-index:3;

@Babyaka
все должно олучиться.
не назначайте z-index для родителя подменю. только для блока поиска (допустим 5) и блока подменю (допустим 6).
вот что-то подобное воспроизвел на локале. серый фон - это родительский ul

Мне необходимо задать z-index:2; для #mainmenu ведь у меня еще и лого имеется, как я выше упоминал, и плюс ко всему тело контента задано z-index:1; а под ним идет уже фон сайта.

Тогда надо сделать эти элементы не дочерними а сестринскими.
Из этого:
<div class="a">
 <div class="b">
 </div>
</div>

В это:
<div class="a">
</div>
<div class="b">
</div>

Расположение этих элементов достичь так же позиционированием и для верности объединить их в один общий родительский элемент:
<div class="с">
 <div class="a">
 </div>
 <div class="b">
 </div>
</div>

Вы мне предлагаете сделать выпадающие элементы отдельными от главного меню?

Сам модуль поиска впишите в #mainmenu

Efanych не обязательно. все там абсолютно реально сделать. главное не задавать для #mainmenu z-index. просто надо правильно сверстать все блоки.

Efanych не обязательно. все там абсолютно реально сделать. главное не задавать для #mainmenu z-index. просто надо правильно сверстать все блоки.

Да я и не говорю, что так обязательно. Просто кажется так проще всего выкрутиться. Тем более, что разметка по сабжу не представлена и как их правильно сверстать, ХЗ.

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

Сам модуль поиска впишите в #mainmenu

Спасибо большое! Помогло.

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

У меня все было по разным блокам. Но теперь меню и поиск в одном, а лого в другом.

Efanych не обязательно. все там абсолютно реально сделать. главное не задавать для #mainmenu z-index. просто надо правильно сверстать все блоки.

не буду же я полностью менять всю верстку. Спасибо за помощь, но раз уж как начал, так и закончу

Верстать блоки с помощью стилей CSS надо конечно уметь, потому что при неправильном написании тэгов <div></div> блоки могут отображаться так как надо или разбегаться по всей странице. Исполняется все это при правильном написании позиционирования, например текст на главной странице пишется с самого начала, а в двух блоках боковых, применяемых как сидебары, не устанавливается с самого начала а уходит вниз и смотрится это совсем не хорошо.

Оформляются все блоги в основном по парному количеству этих тэгов (сколько открывающих, значит должно быть столько и закрывающих), иначе блоки будут показываться Неправильно.

Но почему то пишутся они не по порядку, а могут начинаться с нескольких открывающих, потом несколько закрыться, далее опять открытые и в конце возможно будут 3-4 закрывающих. Логика в этом конечно не очень понятно, но работает все правильно и без ошибок.  

Поэтому, те кто разбирается в правильном отображении верстки блоков и текста знает как это делается, необходимостью у сайтостроителей считается и то чтобы сайт отображался одинаково во всех браузерах Интернета. Иначе когда зайдут на Ваш проект и увидят расползание сайта во все стороны, то уже никогда к Вам не зайдут.