Wie lass ich den Content verschwinden, der sich hinter einem div mit position fixed befindet?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
277
2
18
Hallo zusammen,

der Div mit dem Text "Sehr viel Text" in der section soll hinter dem div mit der Klasse .button-container verschwinden beim runterscrollen. Ich habe versucht dem .button-container eine background color und höhe zu geben aber das hat nicht funktioniert. Die Text ist hinter den buttons noch sichtbar. Kann mir jemand aushelfen?

HTML:
<html>

   <head>

      <title>Test</title>

      <style>

         body {

         margin: 0;

         padding: 0;

         }

         .header{

         display: flex;

         align-items: center;

         padding-left: 1rem;

         height: 50px;

         width: 100%;

         position: fixed;

         z-index: 22;

         background: #ECF0F1;

         box-shadow: 0 1px 5px rgba(0,0,0,.6);

         -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);

         font-size: 1.1rem;

         }

         section{

         height: 1500px;

         padding-top: 70px;

         margin-left: 200px;

         padding-bottom: 20px;

         max-width: calc(100% - 220px);

         }

         aside{

         left: 0;

         margin-top: 50px;

         height: calc(100% - 50px);

         width: 180px;

         background: #ECF0F1;

         -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.40);

         box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);

         position: fixed;

         overflow-y: auto;

         z-index: 10;

         }

         .button-container {

         display: flex;

         justify-content: center;

         width: 100%;

         background-color: white;

         z-index: 1000;

         }

         .buttons {

         position: fixed;

         }

         .button {

         display: inline-block;

         width: 50px;

         height: 50px;

         background-color: aqua;

         }

      </style>

   </head>

   <body>

      <div class="header">

         ....

      </div>

      <aside>

         ...

      </aside>

      <section>

         <div class="button-container">

            <div class="buttons">

               <div class="button"></div>

               <div class="button"></div>

               <div class="button"></div>

            </div>

         </div>

         <div style="margin-top: 75px;"></div>

            Sehr viel Text.

         </div>

      </section>

   </body>

</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Da Du dem div.buttons ein position: fixed; gegeben hast, hat der umgebende Container die Höhe 0, so dass die Hintergrundfarbe nicht greift.

Kannst Du reparieren, indem Du einen der beiden Container weg lässt und dem verbliebenen das position: fixed; und die anderen Styles gibst.

Dann ist das Layout aber immer noch verbesserungswürdig wegen der vielen Nachteile, die das position: fixed; mit sich bringt.

Hier ist eine alternative Version ohne das, ohne Margins und ohne Rechnerei mit calc:
Code:
<!doctype html>
<html>

<head>

    <title>Test</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 180px 1fr;
            grid-template-rows: auto 1fr;
        }

        .header {
            grid-column: 1 / 3;
            display: flex;
            align-items: center;
            padding-left: 1rem;
            background: #ECF0F1;
            box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
            font-size: 1.1rem;
        }

        section {
            min-height: 1px;
            display: flex;
            flex-direction: column;
        }

        aside {
            background: #ECF0F1;
            -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.40);
            box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
            overflow-y: auto;
        }

        .buttons {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            width: 100%;
            background-color: white;
        }

        .button {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }
    </style>

</head>

<body>

    <div class="header">

        ....

    </div>

    <aside>

        ...

    </aside>

    <section>

        <div class="buttons">

            <div class="button"></div>

            <div class="button"></div>

            <div class="button"></div>

        </div>

        <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
hier gekürzt, um es posten zu können
        </main>

    </section>

</body>

</html>
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
277
2
18
Da Du dem div.buttons ein position: fixed; gegeben hast, hat der umgebende Container die Höhe 0, so dass die Hintergrundfarbe nicht greift.

Kannst Du reparieren, indem Du einen der beiden Container weg lässt und dem verbliebenen das position: fixed; und die anderen Styles gibst.

Dann ist das Layout aber immer noch verbesserungswürdig wegen der vielen Nachteile, die das position: fixed; mit sich bringt.

Hier ist eine alternative Version ohne das, ohne Margins und ohne Rechnerei mit calc:
Code:
<!doctype html>
<html>

<head>

    <title>Test</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 180px 1fr;
            grid-template-rows: auto 1fr;
        }

        .header {
            grid-column: 1 / 3;
            display: flex;
            align-items: center;
            padding-left: 1rem;
            background: #ECF0F1;
            box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
            font-size: 1.1rem;
        }

        section {
            min-height: 1px;
            display: flex;
            flex-direction: column;
        }

        aside {
            background: #ECF0F1;
            -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.40);
            box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
            overflow-y: auto;
        }

        .buttons {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            width: 100%;
            background-color: white;
        }

        .button {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }
    </style>

</head>

<body>

    <div class="header">

        ....

    </div>

    <aside>

        ...

    </aside>

    <section>

        <div class="buttons">

            <div class="button"></div>

            <div class="button"></div>

            <div class="button"></div>

        </div>

        <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
hier gekürzt, um es posten zu können
        </main>

    </section>

</body>

</html>
Aber mit dem Code ist beim Scrollen weder Header noch Sidebar (Inhalt) fixed geschweige denn die Buttons. Mit meinem Code waren alle drei Punkte fixed. Das einzige Problem war die Background-color für die Buttons zu setzen sodass es den anschein erweckt dass der text hinter den buttons verschwindet (vielleicht gibt es ja andere lösungen als die background color zu setzen)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Doch, Header, Sidebar und Buttons sind fixed, nur der main-Container ist scrollbar. Hast Du es ausprobiert?
fixed-header-sidebar.png
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
277
2
18
Doch, Header, Sidebar und Buttons sind fixed, nur der main-Container ist scrollbar. Hast Du es ausprobiert?
Anhang anzeigen 5632
Ja, habe aber dem main eine height gegeben, das war mein fehler. Aber wenn der inhalt der main groß genug ist, dann funktionierts perfekt. Wie kommt man aber auf solch einen css code? Generell frage ich mich ständig wie eine optimale lösung für ein bestimmtes layout ausschaut aber finde keine antwort (weil wahrscheinlich zu wenig ahnung). Muss mich nochmal intensiv mit den display und position properties beschäftigen. Das sind anscheinend die wichtigsten begriffe wenn es ums layout geht
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Wie kommt man aber auf solch einen css code?
In diesem Fall habe ich mir dieses Verfahren, nur den einen Container zu scrollen, nicht selbst ausgedacht, sondern @MrMurphy hat es vor längerer Zeit mal vorgestellt.

Generell gibt es für ein Layout meistens kein Patentrezept sondern man muss immer wieder von neuem überlegen, wie man es am besten macht. Es sei denn, es entspricht einem einfachen Schema wie ein Dreispaltenlayout.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
277
2
18
In diesem Fall habe ich mir dieses Verfahren, nur den einen Container zu scrollen, nicht selbst ausgedacht, sondern @MrMurphy hat es vor längerer Zeit mal vorgestellt.

Generell gibt es für ein Layout meistens kein Patentrezept sondern man muss immer wieder von neuem überlegen, wie man es am besten macht. Es sei denn, es entspricht einem einfachen Schema wie ein Dreispaltenlayout.
Langsam entwickele ich ein Gefühl dafür, wie alles zusammenhängt je öfter ich verschiedene Layouts und deren Implementierung ich sehe. Dankeschön
 
Werbung: