Меню
Что нового?

Вопрос по Z-index и IE.

Бочонок

Бочонок

http://frontender.info
Вопрос по Z-index и IE.

Доброго времени суток.

Пришлось по просьбе заказчика сделать нестандартный select (список выпадающий, тоесть).
Все достаточно просто.
СSS и JavaScript.
А текущее значение в hidden input.
Нажимаешь на картинку со стрелочкой и блок содржащий варианты значений меняется с
display:none;
на
display:block;

И все бы хорошо, но "подвал" сайта "перекрывает" этот блок, когда он появляется.

Тут я вспомнил про свойчство z-index.
Он фигурирует в СSS 2 и отвечает за слои.

Тело по умолчанию имет по спецификации 0ой слой.
Все элементы наследуют это значение (кажется... точно кто то знает ?)

Я установил
z-index:1;
для списка .
Opera Mozilla и Firefox стали отображать все коректно.

А вот в IE проблема осталась.
Если присвоить для подвала
z-index:-1;
то cписок его перекрывает, но падвал становится недоступен. А в остальных агентах вообще бардак. Mozilla подвал вообще не отображает.

В MSDN прочел что z-index применим только к блокам с установленым
position:relative;
или
position:absolute;

У меня и у падвала и у селекта
position:relative;

Помогите придумать как с эитм боротся ?
Почему IE так себя ведет ?
Подскажите решение пожалуста.
 
akxxiv

akxxiv

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

Бочонок

http://frontender.info
Спасибо огромное !
Дизайн конечно уплыл, но это уже понятно и лечится =)
Еще раз спасибо !!!!!

-~{}~ 01.02.06 14:47:

--------------------------------------
Ой. я немного погорячился:
любой блок подвала в котором указан
position:relative;
или
position:absolute;
перекрывают селект
(z-index:1000;)
.
С версткой в результате проблема.
как то єто обойти можно ?
подвал без position'ов
сверстать неполучится....

-~{}~ 01.02.06 14:55:

-------------------------------------------------------
Для блок селекта не играет роли позиционирован он абсолютно или относительно. (поэксперементировал - все равно он перекрывается подвалом.)

-~{}~ 01.02.06 15:08:

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

----------------------------------------------------------
Однако один вопрос все же остался:
Можно ли сделать так что бы селект перекрывал эелементы подвала с указаным атрибутом position ?
 
akxxiv

akxxiv

Новичок
А на макет можно взглянуть. А то в последненее время с телекинезом у меня туговато. Болею я... :о(
 
akxxiv

akxxiv

Новичок
Откравенно сказать - не могу так на скорую руку разобраться.
Могу предложить два варианта
1. Сделать для блоков минимальную ширину, тогда они не будут сжиматься до степени, когда релиативные блоки подвала наезжают на селект.
2. Разместить блок селекта внизу под всеми блоками (в body) с абсолютным позиционированием и z-index-ом побольше. А координаты расчитывать при клике на стрелочку относительно положения стрелки или курсора.

А вообще, ну, Вы и наваяли! Столько Id, столько стилей....
Меню и селект правильней сделать списком.
 
Бочонок

Бочонок

http://frontender.info
1. На селект они вроде бы и не наезжают. А размер, там где он необходим задан "жестко". Стальное растягивается - дизайн то тянучка... Требование заказчика. (или я неверно понял замечнаие ? Тогда обьясни пожалуста, что ты имел в виду...)

2. Можно. Но тогда появляется лишний яваскрипт. Но вы правы. Это может быть решением. Z-index тогда вообще не нужен. Элементы интерпретируемые агентом последними перекрывают те которые идут перед ними по умолчанию. Спасибо еще раз. Замечательная идея.

3. Меню и селект правильней сделать списком. - непонял, что вы имеете в виду. можно поконкретнее ? Что за список такой ?

4. Но основной вопрос так и не решен - почему вообще в IE такое горе с z-index? Его как то избежать а не обмануть можно ?
 
Войдите или зарегистрируйтесь для ответа.
Сверху