Question

我有一个插件（intro-js）用于创建一个介绍性导览，其中包含一个不透明的叠加层，在我的页面div上有聚光灯。

使用以下css规则，我尝试将类introjs-showElement中的元素放在所有其他元素之上。

如何在桌面浏览器中显示css中的元素？目前我只在我的CSS中看到一个白色的盒子。

.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
  z-index: 99999998 !important;
}

.introjs-showElement>* {
  -webkit-transform: translateZ(1px) !important;
}

未显示Div文本和切换按钮的HTML示例（全部存在于固定标题可滚动角度数据表插件中）

<td class="td-nopadding ng-enter-fast ng-leave">
                      <div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
                          <div class="text-input">
                            <input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
                          </div>
                          <div class="inc-dec-buttons">
                            <button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
                                 <span class="glyphicon-plus"></span>
                             </button>
                             <br>
                             <button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
                                 <span class="glyphicon-minus"></span>
                             </button>
                           </div>
                        </div>

                    </td>

Answer 1

这是图书馆的一个已知问题：

......仅举几例。

问题是stacking context以及introJs使元素出现在顶部的方式：

库要求目标元素的所有父节点都在主体的相同堆叠上下文中（例如）。 position: fixed创建了一个新的堆叠上下文（transform也是如此）。

所以这个问题不会得到修复，直到introJs调整其制作目标元素的方法为止。

Mobile Safari Z-Index无效

1 个答案: