z-index堆棧系統未按預期工作

Question

我正在爲網站創建一個瀏覽。在巡視的每一步中，燈箱都會顯示文字，有時我希望網站的元素能夠通過燈箱讓它們可點擊。

爲此，我首先爲燈箱（class .tour-backdrop）定義了1100的z-index。然後，當一個元素必須是可點擊的時，Javascript代碼會在此元素上添加一個類（.tour-step-backdrop），該元素設置此元素的相對位置和z-index爲1101.

但是，元素仍然出現在燈箱下方... 我確定指出的元素是正確的（CSS已更改，但似乎沒有效果。）

我在做什麼錯了？

HTML：

<div id="adminmenuwrap"> 
<ul id="adminmenu" role="navigation"> 


    <li class="wp-first-item wp-not-current-submenu wp-menu-separator menu-top-first menu-top-last"><div class="separator"></div></li> 
    <li class="wp-not-current-submenu wp-menu-separator"><div class="separator"></div></li> 
    <li class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_mypage menu-icon-マイページtop menu-top-first" id="toplevel_page_ac_admin_mypage"> 
    <a href='profile.php' class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_mypage menu-icon-マイページtop menu-top-first" aria-haspopup="true"><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/mypage.png" alt="" /></div><div class='wp-menu-name'>マイページTOP</div></a> 
    <ul class='wp-submenu wp-submenu-wrap'><li class='wp-submenu-head'>マイページTOP</li><li class="wp-first-item"><a href='profile.php' class="wp-first-item"><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />ユーザーページ</a></li><li><a href='https:/autocoding.jp/zip/layertags.pdf'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />タグ一覧ダウンロード</a></li><li><a href='https:/autocoding.jp/demo/demo_psd.zip'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />デモＰＳＤダウンロード</a></li></ul></li> 
    <li class="wp-not-current-submenu menu-top toplevel_page_ac_admin_project_list menu-icon-プロジェクト一覧" id="toplevel_page_ac_admin_project_list"> 
    <a href='admin.php?page=ac_admin_project_list' class="wp-not-current-submenu menu-top toplevel_page_ac_admin_project_list menu-icon-プロジェクト一覧" ><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/project.png" alt="" /></div><div class='wp-menu-name'>プロジェクト一覧</div></a></li> 
    <li class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_points menu-icon-ポイント・購入管理" id="toplevel_page_ac_admin_points"><a href='admin.php?page=ac_admin_points_buy' class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_points menu-icon-ポイント・購入管理" aria-haspopup="true"><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/point.png" alt="" /></div><div class='wp-menu-name'>ポイント・購入管理</div></a> 
    <ul class='wp-submenu wp-submenu-wrap'><li class='wp-submenu-head'>ポイント・購入管理</li><li class="wp-first-item"><a href='admin.php?page=ac_admin_points_buy' class="wp-first-item"><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />変換ポイントの購入</a></li><li><a href='admin.php?page=ac_admin_points_history'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />購入履歴</a></li></ul></li> 
    <li class="wp-not-current-submenu menu-top toplevel_page_faq menu-icon-faq" id="toplevel_page_faq"> 
    <a href='faq' class="wp-not-current-submenu menu-top toplevel_page_faq menu-icon-faq" ><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/faq.png" alt="" /></div><div class='wp-menu-name'>FAQ</div></a></li> 
    <li class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_manual menu-icon-マニュアル" id="toplevel_page_ac_admin_manual"><a href='admin.php?page=ac_admin_prepare' class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_ac_admin_manual menu-icon-マニュアル" aria-haspopup="true"><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/manual.png" alt="" /></div><div class='wp-menu-name'>マニュアル</div></a> 
    <ul class='wp-submenu wp-submenu-wrap'><li class='wp-submenu-head'>マニュアル</li><li class="wp-first-item"><a href='admin.php?page=ac_admin_prepare' class="wp-first-item"><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />1.事前準備</a></li><li><a href='admin.php?page=ac_admin_layout'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />2.レイアウト</a></li><li><a href='admin.php?page=ac_admin_layertag'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/arrow.png" />3.レイヤータグ</a></li></ul></li> 
    <li class="current menu-top toplevel_page_ac_admin_tour menu-icon-ツアーを開始する menu-top-last" id="toplevel_page_ac_admin_tour"> 
    <a href='admin.php?page=ac_admin_tour' class="current menu-top toplevel_page_ac_admin_tour menu-icon-ツアーを開始する menu-top-last" ><div class="wp-menu-arrow"><div></div></div><div class='wp-menu-image'><img src="http://local.autocoding/wp-content/plugins/autocoding-admin-angular/img/tour.png" alt="" /></div><div class='wp-menu-name'>ツアーを開始する</div></a></li></li></ul> 
</div> 

CSS：

.tour-backdrop{ 
    background: black; 
    z-index: 1100; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    opacity: 0.5; 
} 

.tour-step-backdrop{ 
    position: relative; 
    z-index: 1101; 
    background: inherit; 
} 

JS：

_pointedDOM = $(_tipsContent[_start+_currentTip].dom); 
_pointedDOM.addClass('tour-step-backdrop'); 

結果： http://puu.sh/gWcuH/71bd5fd268.png

編輯：我解決了這個概率通過在包含按鈕的菜單中創建燈箱來創建。然而 我不確定這是最好的解決方案，所以如果你有線索，不要猶豫，告訴所有人。

Answer 1

做絕對是自己的立場：

.tour-step-backdrop{ 
    position: absolute; 
    z-index: 1101; 
    background: inherit; 
}