Mobile Safari Z-Index Not Working

我有一個插件（intro-js），用於創建包含我的頁面div上的聚光燈的不透明疊加層的介紹性遊覽。Mobile Safari Z-Index Not Working

使用下面的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; 
}

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>

來源

2017-08-30 Vahe

如果你可以包含一些HTML，這樣我們就可以看到這個工作，這會更容易理解你想要做什麼。但請注意，「z-index」本身並不能做任何事情。 'z-index'只適用於定位元素，所以你可能想在你的第一條規則中加上'position：relative'。 – cjl750

請參閱修改 – Vahe

這是一個已知的問題與庫（在固定報頭滾動角的角度的數據表插件所有存在）：

...僅舉幾例。

的問題是，stacking context和的方式，使得introJs元素出現在最前面：

庫要求目標元素的所有父節點是在主體（例如）相同的堆疊內容。 position: fixed創建新的堆疊上下文（與transform一樣）。

所以這個問題將不會被修復，直到introJs調整其目標元素的方法出現在頂部。

來源

2017-10-18 15:36:06 bozdoz

Mobile Safari Z-Index Not Working

回答

相關問題