1
アイコンをクリックするとDiv要素が表示されます。 これはデスクトップ上で正常に動作します。しかし、私がそれをモバイル上で試しているとき、上記の代わりにコンテンツの下に表示されますが、要素のZインデックスは5000に設定されています。CSS固定要素がコンテンツの下に表示されます
Webkitベースのブラウザで実行されていると、最初は私はそれがページの高さに依存していると思っていましたが、私がデバイスツールバーと私がテストしたすべての携帯電話でChromeを実行しているときだけです。
これは次のようになります。それはあなたがフッターに情報ボタンをクリックすると表示されるポップアップです：
ボックス/ポップアップのCSSクラスCMS-フッタ情報を持つ要素がポップアップ/ボックスです：
position: fixed;
background-color: #444445;
color: #fff;
height: auto;
display: block;
left: 1%;
bottom: 60px;
padding: 2%;
z-index: 4000;
フッタのHTML：
<div class="footer">
<div class="footer-column-one">
<i class="fa fa-globe fa-3x" aria-hidden="true"></i>
<div class="cms-links">
<h6>Document identity</h6>
<div>
<span class="cms-footer-info-0-label">something</span>
<span class="cms-footer-info-0-value">else</span>
</div>
</div>
</div>
<div class="cms-footer-center">
<div class="cms-footer-center-0">Some Text </div>
</div>
<div class="footer-column-three">
<i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
<div class="cms-footer-info">
<h6>Document identity</h6>
<div class="cms-footer-info-0">
<span class="cms-footer-info-0-label">Publ. no. </span>
<span class="cms-footer-info-0-value">T810181</span>
</div>
<div class="cms-footer-info-1">
<span class="cms-footer-info-1-label">Label</span>
<span class="cms-footer-info-1-value">Value </span>
</div>
</div>
</div>
</div>
ポップアップ下のコンテンツが静的レイアウトを持ち、全くz屈折率を有していない。
CSS：
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
max-width: 700px;
display: block;
HTML：
<div class="container">
<div>
Alot of text. Wrapped in spans, divs and so on.
</div>
</div>
任意のヒントを大幅に高く評価されています。ありがとうございました！実施例に
リンク：Working example
サイトをロードしています。一番下の情報アイコンまたは地球儀のアイコンを押してみてください。関連するポップアップが表示され、デベロッパーコンソールを開き、Chromeのデベロッパーコンソールの左上にある端末ツールバーの切り替えを選択するか、携帯電話のURLにアクセスします。
全体コード、つまりhtmlも提供してください – Chris
jsfiddleを提供していますか？ –
私はsom htmlを追加しました。あなたが本当の例を見ることができるようにaws s3にアップロードすることが大丈夫なら、私は顧客に確認します。 –