Problem in CSS mit fixierter Position?

Hallo liebe Ratgeber!

Ich arbeite gerade an einem kleinen Projekt in HTML. Dazu habe ich unter anderem einen Header-Bereich, welcher beim herunterscrollen stets weiter angezeigt werden soll. Ich habe ihm also die CSS EIgenschaft position: fixed verpasst, welche sich eigentlich nicht wirklich von position: relative unterscheidet, außer dass das Element nun fixiert wird. Als ich jedoch nun fixed statt relative verwendet habe, hat der Header Bereich ein Abstand nach oben bekommen. Zu Testzwecken habe ich außerhalb des Header-Bereichs eine lose Überschrift angeordnet. Diese erschien allerdings nicht wie gewollt unter dem Header-Bereich, sondern verschwand in ihm, als würde es den Header-Bereich nicht geben.

Hier mein Problem

Bild zum Beitrag

Der Header-Bereich bekommt trotz margin:0 einen Abstand nach oben hin, eine darunter gesetzte Überschrift h2 verschwindet darin.

Wer kann mir bei meinem Problem ein wenig weiterhelfen? Ich möchte, dass der Header oben bleibt und alle folgenden Elemente auch unter dem Header angezeigt werden.

Danke im Voraus!

LG Korbi

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

glebkema

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

19.04.2019, 21:44

Der feste Bereich kam aus dem allgemeinen Seitenfluss, und alle anderen Blöcke wurden aus diesem Grund nach oben verschoben. Daher befindet sich der benachbarte Block jetzt unter dem festen Bereich.

Um dies zu beheben, fügen Sie die obere Polsterung für den Body-Tag hinzu. Die Größe der "Polsterauflage" sollte der Höhe der festen Fläche entsprechen.

Zum Beispiel:

body {
	padding-top: 80px;  // Oder einen anderen Wert
}

Vielleicht sollte diese Auffüllung in Ihrem Layout nicht dem Body-Tag hinzugefügt werden, sondern dem Containerblock, der den Header und den Rest des Inhalts enthält.

Woher ich das weiß:Berufserfahrung – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

glebkema

19.04.2019, 21:58

Hier ein Beispiel für CodePen, bei dem die Eigenschaft "position: fixed" für den Block mit dem Menü festgelegt und die kompensierende "padding-top" -Eigenschaft für das body-Tag hinzugefügt wird: https://codepen.io/glebkema/pen/PzGBJx

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

19.04.2019, 21:41

Das relativ positionierte Element liegt unter deinem fixierten Header, da es sich relativ zum body-Element positioniert. Füge einen Abstand nach oben ein oder setze ein Platzhalterelement, welches die selbe Höhe wie dein Header hat.

Ähnliche Beiträge

CSS - Wie kann mein ein Objekt mit "position: fixed;" oben zentrieren?

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

CSS Überschrift: Position senken?

Hallo, ich versuche mich zurzeit an einer CSS-Challenge. Leider weiß ich nicht, wie ich die Position der Überschrift (Learning is not a privilege...) ändern kann. Sie steht viel zu weit oben. Mit height kann ich hier nicht arbeiten, weil das Einfluss auf die unteren Blöcke hat und sich dann alles nach unten senkt. Zurzeit sieht der Code für die Überschrift wie folgt aus:

#header p {margin-left: 400px; font-size: 40px; }

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zum Beitrag

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zum Beitrag

CSS : position: absolute; Was ist das?

Ich verstehe es irgendwie nicht, was diese Position macht? Und die relative Position sagt einfach nur, dass das Element frei beweglich ist ?

...zum Beitrag

SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">

...zum Beitrag

Css Element mit position:fixed überdeckt Elemente?

Ich habe in CSS eine Navigationsbar mit der Eigenschaft position:fixed, da ich möchte, dass sie mitkommt beim Scrollen. Jedoch überlagert sie am Anfang ebenso etwas, was ich eben nicht will.

Demnach ist meine Frage, wie ich das ganze so mache, dass die Navigationsleiste zu Beginn nicht schon ein Element überdeckt.

Navigation:

.nav{
  position: fixed;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #4A9188;
  color: #ffffff;
}

...zum Beitrag

Css Navbar design?

Hallo,

Ich habe folgendes problem:

ich bin gerade etwas am herumexperimentieren und möchte gerne bei meiner Website eine Navbar machen welche am anfang mit dem Sector 1 einen Hintergrund haben(durchgehend), wenn ich dann herunterscrolle dann sollte dieses Hintergrundbild nur noch im header sein. Weis jemand zufällig wie man sowas angehen könnte?

...zum Beitrag

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zum Beitrag

Div soll beim scrollen am Bildschirmrand fixiert werden?

Hallo,

Ich habe ein Div, welches unter einem anderen Div liegt. Wenn ich nun scrolle, soll das Div, sobald es am oberen Browserrand ist, dort fixiert sein. Ich habe folgenden Code ausprobiert, aber leider funktioniert dieser nicht:

.fixed {position: fixed; top:0; }

Kann mir jemand helfen, was an dem Code falsch ist? Kenne mich leider nicht so sehr mit Javascript aus.

Vielen Dank im Voraus

...zum Beitrag

CSS Abstand von Header zu Fensterrand verschwinden lassen?

Hey, ich will den den Abstand zwischen Header und dem oberen Fensterrand verschwinden lassen, es funktioniert aber nicht

Margin: 0 und padding: 0 habe ich probiert, funktioniert aber nicht

...zum Beitrag

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen