barbitoff programmer`s blog

Здесь я публикую заметки из программерской жизни: грабли, на которые мне случилось наступить, проблемы, для которых было найдено элегантное (или не очень) решение, а также все, с чем мне пришлось столкнуться и чем хотелось бы поделиться =)
PS Если хотите меня поблагодарить - на странице есть 3 места, чтобы это сделать =)

четверг, 19 июля 2012 г.

jQuery UI - виджет autocomplete и z-index

Виджет jQuery UI autocomplete для вычисления z-index`а выпадающего списка подсказок использует "реальный" z-index input`а, к которому он привязан, прибавляя к нему 1. Этот "реальный" z-index вычисляется следующим образом: сначала проверяется, установлено ли свойство z-index у самого input`а. Если да - берется оно, если нет - осуществляется обход всех родителей input`а и поиск z-index`а у них. Если z-index так и не будет найден, он принимается равным 0. Что важно: помимо проверки у элементов наличия свойства "z-index" проверяется также, что css-свойство "position" установлено и равно одному из значений: "absolute", "fixed", "relative". Если свойство "position" отсутствует или имеет другое значение, считается, что "z-index" у элемента не установлен (т.к. он, действительно, при этом не влияет на отображение элемента и игнорируется браузером). 
Пришлось со всем этим разбираться вот по какой причине: при использовании autocomplete-input`а внутри YUI2 Panel этот z-index вычисляется неверно, т.к. панель размещается внутри iframe`а, у которого z-index равен 3, однако при поиске "реального" z-index`а jQuery UI вначале находит div с классом "yui-panel", для которого z-index равен 1, и в итоге выбирает для виджета z-index равным 2, помещая его под iframe:


Побороть эту проблему можно, установив явно z-index и position для input`а, к которому прикреплен виджет.

Комментариев нет:

Отправить комментарий