DIV Positionierung mit fixed und relative

  • Moin Moin, ich hoffe mir kann hier einer auf die Sprünge helfen, ich tue mich immer noch sehr schwer mit der Positionierung.


    .head { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 100; background-image: url('img/nav-bg.png'); background-repeat: repeat-y; background-repeat: repeat-x; }

    .sec1 { max-width: 980px; position: relative; padding: 20px border-radius: 4px 4px 4px 4px; box-shadow: 10px 10px; background-color: #F8F8F8; padding: 1%; border: 6px solid #006600; margin: auto; }

    <div class="head"><img class="logo" src="img/logo.png"/></div>

    <div class="sec1"><img class="cimg" src="img/goesken_style_massanfertigung.jpg"/></div>

    Mein Problem ist jetzt, dass die div Box head oben positioniert bleibt, aber sich die div box sec1 nicht dadrunter einordnet sondern scheinbar an der selben stelle anfängt wie die head box?


    Wie bekomme ich dass denn nun hin, dass die Box direkt darunter kommt?


    Gruß DOS


  • Das ist allerdings genau das, was du mit position: fixed; festlegst. Ein so formatiertes Element ist aus dem Textfluss raus und positioniert sich eben da, wo du es hinsetzt - überdeckt dabei alles, was sich sonst noch an dieser Stelle befindet.

    Alternativ könntest du es mit position: sticky; versuchen... https://www.w3schools.com/howto/howto_css_sticky_element.asp. Das funktioniert allerdings nicht im InternetExplorerer!

    Es wäre auch mit CSS Flexbox zu realisieren, wenn du ein umschließendes Element (zB <body>) als Flexcontainer festlegst und deine beiden Div's als Flexitems hineinpackst und entsprechend formatierst.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Die schlechteste Möglichkeit.. weil nicht responsiv... wäre eine margin-top für den Container sec1

  • Alternativ könntest du es mit position: sticky; versuchen... https://www.w3schools.com/howto/howto_css_sticky_element.asp. Das funktioniert allerdings nicht im InternetExplorerer!


    Hi, danke für die Hilfe, sticky ist für meine Zwecke denke ich genau das richtige, macht Zumindest dann, das was es soll.


    Allerdings habe ich jetzt um head rundherum ca 2 - 4 px abstand zu den rändern bzw dem unteren Objekt, setze ich das ganze von Sticky auf fixed, dann verschwindet der Abstand.. auch ein margin 0 bringt da keine änderung, ist das eine Eigenschaft von Sticky?

  • Nein, eigentlich nicht.

    Mach mal folgendes in dein CSS:

    Code
    * {
       box-sizing: border-box;
    }
    html, body {
       margin: 0;
       padding: 0;
    }

    Wen es dann nicht besser ist, dann brauchen wir deinen Quellcode (HTML und CSS) oder besser noch einen Link zur Seite.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!