Meine Position: fixed Header verschwindet

-5

So here ist mein HTML-Code und here ist das CSS. Es ist ziemlich kurz. Mein Problem ist, dass, wenn ich meine Header gesetzt (es ist ein div) zu position: fixed es verschwindet, auch wenn ich
Meine Position: fixed Header verschwindet

top:0; 
left:0; 
z-index:1;

gesetzt Wenn jemand helfen kann, ist die Suche wenig Hilfe auf diesem zur Verfügung gestellt hat. Danke vielmals!

PS: Was passiert mit der Textformatierung dieser Website? Ich muss < 'br /' schreiben, um zur nächsten Zeile wtf zu springen? Aber es funktioniert nicht in HTML. BTW das ist der Grund, warum der Code in zwei Bildern und nicht schön eingebettet oder was auch immer ist. Das tut mir leid.

Quelle

2016-09-21 Kyu

Ich würde sehr empfehlen, den Code-Snippet-Ersteller im Stapelüberlauf zu verwenden, anstatt auf Ihren Code zu verlinken. Es macht es viel einfacher, Lösungen vorzuschlagen. – k2snowman69

Ja, wtf in der Tat - wenn Sie eine neue Frage stellen, gibt es eine Box in der rechten Seitenleiste mit dem Titel "Wie man formatiert" mit den grundlegenden Grundlagen, die Sie wissen müssen, sowie einen Link zu [Formatierungshilfe] (https: // stackoverflow. com/editierhilfe). – CBroe

#header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 80px; 
 
    background-color: red; 
 
    margin-bottom: 10px; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 
#footer { 
 
    clear: both; 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
    top: 10px; 
 
    
 
} 
 
.left{ 
 
    float: left; 
 
    height: 800px; 
 
    width: 10%; 
 
    background-color: green; 
 
} 
 
.right{ 
 
    float: right; 
 
    height: 800px; 
 
    width: 89.5%; 
 
    background-color: green; 
 
}

<html> 
 
    <head> 
 
    <title>Test the geader shit</title> 
 
    </head> 
 
    <body> 
 
    <div id='header'>fixed header</div> 
 
    <div class='left'>left shit</div> 
 
    <div class='right'>right shit</div> 
 
    <div id='footer'>footer</div> 
 
    </body> 
 
</html>

Wenn wir ein Element Position machen fixiert ist, müssen wir Breite erwähnen, in Ihrem Link nicht ich sehe u irgendeine Breite des #header Element erwähnt und auch in HTML gibt es keine Text oder Inhalt innerhalb der

Wenn Sie Breite erwähnen, wird es angezeigt. 100% Breite macht es die volle Breite von Browser-Ansichtsfenster

Quelle

2016-09-21 19:32:39 Ramana

müssen Sie dem #header etwas Breite geben, geben Sie 100% dem #header und sehen Sie – Ramana

Ihre Kopfzeile ist nicht verschwunden, sie befindet sich direkt hinter Ihren zwei schwebenden Elementen. Verschieben Sie den Code <div id="header"> unter die Floating Divs.

Der Z-Index funktioniert nur mit Elementen mit dem gleichen Positionswert, deshalb funktioniert das nicht für Sie.

Das heißt, je nachdem, was Sie erreichen wollen, vermeide ich die Floats und stattdessen Flexbox-Layouts.

Quelle

2016-09-21 19:18:26 k2snowman69

_ "Z-Index funktioniert nur mit Elementen des gleichen Positionswerts" _ - nicht wahr; Z-Index funktioniert nur bei positionierten Elementen - das bedeutet alles mit einem anderen Positionswert als dem Standard 'static'. Es gibt jedoch noch andere Dinge, die Sie beachten sollten - siehe den exzellenten Artikel [Was niemand über den Z-Index gesagt hat] (https://philipwalton.com/articles/what-no-one-told-you-about-z-index) /) – CBroe

Sie müssen Ihren Header div eine Breite geben. Wenn ein div leer ist und keine Breite und Höhe hat, ist es grundsätzlich unsichtbar.

Quelle

2016-09-21 19:28:55 InaN

Okay, das ist es! Vielen Dank! – Kyu

Meine Position: fixed Header verschwindet

Antwort

Verwandte Themen