Html z-index не предоставлен - PullRequest
Новая
       21

Html z-index не предоставлен

1 голос
/ 22 марта 2011

Глядя на CSS-спецификацию W3C и наблюдая за рендерингом моего собственного решения, я пришел к единственному выводу: если у меня есть диалоговое окно (абсолютно позиционированное) с полем ввода (относительным) в нем и обычным скриптом автозаполнения (обычно включает в себя список ul за пределами ввода (абсолютно поз.)) - я не могу сделать выпадающий список значений автозаполнения видимыми нормально и поместить его поверх кнопок и границ родительского диалогового окна?Это заставляет меня чувствовать себя плохо.Может ли кто-нибудь опровергнуть этот прискорбный результат?

Извините за мой английский.

upd2: 

        <div id="modal-window" style="display: block; position: absolute; z-index: 9000; visibility: visible; opacity: 1; left: 530px; top: -58px;">
            <div id="modal-window-body">
                <input id="city" name="city" />
                <ul class="autocompleter-choices" style="position:absolute; z-index: 19999; visibility: visible; opacity: 1; left: 8px; top: 406px; width: 126px; overflow-y: scroll; height: 189px;">
                    <li class="autocompleter-selected">
                        <span class="autocompleter-queried">
                            N
                        </span>
                        amibia
                    </li>
                </ul>
                <div id="modal-window-buttons">
                    <span class="button">
                        <a href="#" class="button-ok">ok</a>
                    </span>
                    <span class="button">
                        <a href="#" class="button-close">cancel</a>
                    </span>
                </div>
            </div>
        </div>

результат:

enter image description here

Принимаю ответы на русском языке так же.Очень неприятная загвоздка вышла.Надо решить.

Ответы [ 2 ]

2 голосов
/ 22 марта 2011

z-index может быть дан только позиционированным элементамВаш ul class = "autocompleter-choices", кажется, не позиционируется (если это правда, что вы используете только встроенные стили в этом документе).Попробуйте позиционировать его абсолютным или относительным.

1 голос
/ 22 марта 2011

Мое единственное предположение, исходя из предоставленной минимальной информации, состоит в том, что #modal-window-body имеет указанные height и overflow:hidden.Это объясняет, почему это никогда полностью не показывает и большую часть вашей проблемы.Тем не менее, это не объясняет, почему он попадает под кнопки.Опять же, я предполагаю, что #modal-window-buttons - это position: absolute; bottom:0; z-index: higher-that-yours.

. Я бы расширил ваш вопрос, включив в него больше информации, чем встроенные стили, применяемые во время манипулирования JavaScript.Только зная текущее состояние CSS, мы можем помочь в дальнейшем.

...