Question

我正在为网站创建一个游览。在巡视的每一步中，都会出现一个显示文本的灯箱，有时我希望网站的元素越过灯箱使其可以点击。

为此，我首先为灯箱（类.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;
}

z-index堆栈系统未按预期工作

1 个答案: