CSS Fixed Element erscheint unter dem Inhalt

Ich habe ein Div-Element, das beim Klicken auf ein Symbol erscheint. Dies funktioniert auf dem Desktop. Aber wenn ich es auf Mobile versuche, erscheint es unter dem Inhalt statt oben, obwohl der Elemente Z-Index auf 5000 eingestellt ist.CSS Fixed Element erscheint unter dem Inhalt

Es scheint, als ob es nur endet, wenn es auf einem Webkit-basierten Browser läuft. Zuerst dachte ich, dass es abhängig von der Höhe der Seite ist, aber es ist nur, wenn ich Chrome in Gerätesymbolleiste und alle Telefone, die ich getestet habe, ausgeführt habe.

Es sollte so aussehen. Es ist ein Popup, das erscheint, wenn Sie auf den Info-Button in der Fußzeile klicken:

Die CSS für die Box/Pop-up ist das Element mit der Klasse cms-footer-info ist das Popup/box:

position: fixed; 
background-color: #444445; 
color: #fff; 
height: auto; 
display: block; 
left: 1%; 
bottom: 60px; 
padding: 2%; 
z-index: 4000;

HTML für die der Fußzeile:

<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>

der Gehalt unterhalb des Pop-up-Layout hat statische und hat keinen z-index:

Die CSS:

margin-bottom: 65px; 
margin-left: auto; 
margin-right: auto; 
max-width: 700px; 
display: block;

Die html:

<div class="container"> 
    <div> 
    Alot of text. Wrapped in spans, divs and so on. 
    </div> 
</div>

Irgendwelche Tipps sehr geschätzt werden. Vielen Dank!

Link zu Arbeitsbeispiel: Working example

Wenn Sie die Site geladen haben. Versuchen Sie, das Info oder Globussymbol unten zu drücken. Es zeigt Ihnen die relevanten Popups, öffnen Sie jetzt die Entwicklerkonsole und wählen Sie in der Entwicklerkonsole in Chrome oben links die Option zum Umschalten der Gerätesymbole oder rufen Sie die URL auf einem Telefon auf.

Quelle

2016-09-02 Jonathan Andersson

Bitte geben Sie den ganzen Code, d. H. Die HTML zu – Chris

bieten jsfiddle? –

Ich habe som html hinzugefügt, ich werde mit meinem Kunden überprüfen, ob es in Ordnung ist, es auf aws s3 hochzuladen, damit Sie das echte Beispiel sehen können. –

nehmen Sie die overflow:hidden; aus der Fußzeile heraus. es hat es für mich gelöst.

Quelle

2016-09-02 08:00:39

Ooo mein guter :) Vielen Dank! –

CSS Fixed Element erscheint unter dem Inhalt

Antwort

Verwandte Themen