私は、ページ区画にスポットライトを含む不透明なオーバーレイを含む紹介ツアーを作成するためのプラグイン(intro-js)を持っています。モバイルSafari Z-インデックスが動作しない
次の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>
この作業が表示されるようにいくつかのHTMLを含めることができれば、あなたがしようとしていることを理解しやすくなります。しかし、 'z-index'だけでは何もしないことに注意してください。 'z-index'は配置された要素に対してのみ機能するので、最初のルールに' position:relative'を追加したいと思うかもしれません。 – cjl750
編集をご覧ください – Vahe