Anzeige drei Divs Reihenfolge absolut als fest als relativ

Ich habe einige Probleme beim Rendern auf nur App (iOS) NICHT Website: Ich muss reines Javascript ohne andere Bibliotheken verwenden.Anzeige drei Divs Reihenfolge absolut als fest als relativ

<div class="header" style="position:fixed; z-index: 99;"></div> 
<div class="content" style="position:relative"> 
    <div class="cover" style="position:absolute; z-index:999;"></div> 
    //some text content 
</div>

Das Cover div zeigte keine überlappenden Header an. Was kann ich dagegen tun?

Ich möchte, dass zunächst Benutzer Cover zuerst sehen, dann nach oben scrollen und dann festen Header und schließlich Inhalt sehen.

Ich möchte nicht den HTML ändern, denn wenn ich Header in Content div setzen, springt Header in der Regel und nehmen Moment, um die richtige Position beim Scrollen Inhalt div.

Danke für jede Hilfe!

Quelle

2017-06-19 Đình Lâm

_ "Absolute Div überlappte nicht Header" _ Sie haben es nicht gesagt. --- _ "Wie kann ich das tun?" _ Nachschlagen _CSS_. --- _ "das HTML destrukturieren" _ was bedeutet das? – evolutionxbox

'z-index' funktioniert nur mit Elementen im selben übergeordneten Container, da' header' und 'cover' nicht im selben Elternteil sind, ändert ihr Z-Index nicht ihre Überlappung. Mit Ihrer aktuellen Struktur müssten Sie 'z-index' auf' content' setzen, nicht auf 'cover' –

, aber ich setze den z-index des Inhalts größer als die Überschrift, ich sehe nur den Text der Kopfzeile ohne CSS. In diesem Fall zeigt das Cover OK an. Kannst du eine andere Lösung empfehlen? –

Geben Sie #content auch eine Z-Index-Eigenschaft. Say, 100.

Das Problem sieht wie Z-Index-Kontext aus. Z-Index ist kein globaler Wert - es ist relativ zu seinem Elternteil. Sie haben # header mit z-index: 99, und es ist Geschwister #content mit z-index: auto (sagen wir 1 für das Argument). #header überlappt immer #content und seine untergeordneten Elemente.

Quelle

2017-06-19 10:41:22 cheersphilip

Dank Wenn ich hinzufügen #content einen z-index: 100, der Auftrag jetzt ist die Anzeige Abdeckung> Textinhalt> Kopf meinen Screenshot sehen: https://gyazo.com/c64087da5e6b590a06619be8116e38c8 –

@ ĐìnhLâm können Sie Ihre CSS schreiben ? Hier könnte einiges passieren. Danke :) – cheersphilip

Sie verwenden absolute Eigenschaft Abdeckung Klasse, bezogen auf Inhalt classname das heißt, es wird Position zum Inhalt Klasse nach ändern. Entfernen Sie die relative -Eigenschaft der content-Klasse, fügen Sie wrapeer allen Header- und content-Klassennamen hinzu.

<div style="position:relative"> 
     <div class="header" style="position:fixed; z-index: 99;"></div> 
     <div class="content" > 
      <div class="cover" style="position:absolute; z-index:999;"></div> 
      //some text content 
     </div> 
</div>

Quelle

2017-06-19 10:42:41

Mein Header und Inhalt hat Eltern div ist Körper, aber ich habe viele HTML-Dateien mit der gleichen Struktur, also versuche ich einen Weg, ohne HTML zu ändern. Anyways thanks :) –

@ ĐìnhLâm Verwenden Sie 'scroll' Ereignis und ändern Sie Stile entsprechend Ihrer benutzerdefinierten Themes. –

Anzeige drei Divs Reihenfolge absolut als fest als relativ

Antwort

Verwandte Themen