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; 
}