Html z-index不是规范

Question

查看W3C的CSS规范并观察我自己的解决方案的呈现，我只得出一个结论： 如果我有一个带有输入字段（相对）的对话窗口（绝对定位）和通常的自动完成脚本（通常包括超出输入的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>

结果：

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

Answer 1

z-index只能给定位元素。您的ul class =“autocompleter-choices”似乎没有定位（如果您在此文档中仅使用内联样式）。尝试将其定位为绝对或相对。

Answer 2

根据给出的最小信息，我唯一的猜测是#modal-window-body具有指定的height和overflow:hidden。这就解释了为什么它永远不会完全显示出你问题的最大部分。但是，它没有解释为什么它属于按钮。我的猜测是#modal-window-buttons是position: absolute; bottom:0; z-index: higher-that-yours。

我会扩展您的问题以包含比javascript操作期间应用的内联样式更多的信息。只有了解css的当前状态才能进一步提供帮助。