[英]Html z-index not provident specification
查看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>
結果:
Принимаюответынарусскомязыкетакже。 Оченьнеприятнаязагвоздкавышла。 Надорешить。
z索引只能賦予定位的元素。 您的ul class =“ autocompleter-choices”似乎未定位(如果的確,您在此文檔中僅使用了內聯樣式)。 嘗試將其定位為絕對或相對。
根據給出的最少信息,我唯一的猜測是#modal-window-body
具有指定的height
和overflow:hidden
。 這就解釋了為什么它永遠不會完全顯示出來,並且是問題的最大一部分。 但是,它沒有解釋為什么它會落在按鈕下面。 同樣,我的猜測是#modal-window-buttons
的position: absolute; bottom:0; z-index: higher-that-yours
是position: absolute; bottom:0; z-index: higher-that-yours
position: absolute; bottom:0; z-index: higher-that-yours
position: absolute; bottom:0; z-index: higher-that-yours
。
我將擴大您的問題,以包括比在javascript操作期間應用的內聯樣式更多的信息。 只有了解CSS的當前狀態,我們才能進一步提供幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.