Wie kann man den Header immer beim runter scrollen sehen, css + html?
2 Antworten
Das lässt sich auf verschiedene Art und Weise realisieren.
CSS 3 etwa stellt dafür 2 Möglichkeiten zur Verfügung.
Erste Möglichkeit:
position: fixed;
Einen modernerer Ansatz:
position: sticky;
Nur musst du acht darauf geben, wie die Browser position: sticky unterstützen, da dies wie gesagt ein etwas moderneres Feature ist.
Beispiel:
header
{
position: sticky;
top: 0;
}
Damit legst du fest, dass beim Runterscrollen der Header keinen Abstand ausgehend von oben hat.
LG
also habe clear:both; und will den footer noch weiter nach unten verschieben...
Hier wirds erklärt, mit position: fixed;
Jetzt hab ich aber ein Problem... jetzt wird section und aside nach oben geschoben und header nach links oben geschoben... ich will aber, dass header wieder oben ist.. wie mache ich das?
Die Breite des headers musst du manuell auf 100% setzen, wenn er absolut positioniert ist.
header {
display: block;
position: absolute;
width: 100%;
}
Und den Platz, den er überdeckt, musst du beim Container darunter ausgleichen.
main {
position: relative;
top: 2em;
}
Die 2em musst du durch die Höhe des Headers ersetzen.
aber wie zentriere ich jetzt wieder mein Inhalt im header?
ähm kurze Frage... wie kann ich den footer 10px weiter weg von section setzen?