fixed position, aber immer über dem nächsten Element

  • Hallo,

    ich möchte ein Element etwa ein <h3> fix oben an der Seite haben, aber so, dass bei kleiner Bildschirmweite, wenn das <h2> umgebrochen wird, der Abstand zum nächsten Element bleibt.

    Beim folgenden Code überlappen sich die beiden Elemente bei schmalen Bildschirmen:



    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    </head>

    <style>

    .fix {

    position: fixed;

    top: 0px;

    }

    .fuellmaterial {

    height: 800px;

    margin-top: 40px;

    background-color: red;

    }

    </style>


    <body>

    <h3 class="fix">sollte fix bleiben, aber auch bei kleiner Weite über dem nächstfolgenen Element stehen.</h3>

    <div class="fuellmaterial">Füllmaterial </div>

    </body>

    </html>


    Ich wäre froh um eine einfache Lösung (ohne Medienabfrage).


    Jürg