position: fixed bei sidebar-right

  • Hallo,

    ich möchte auf der Position sidebar-right ein Modul anzeigen, dass fest/unbeweglich bleibt, während der Content gescrollt wird.

    Code
    @media (min-width: 1024px) {
    .container-sidebar-right {
    background-color: #ffff00;
    width: 300px; height: 250px;
    /*position: relative; top: 5px; right: 10px; z-index: 0;*/
    position: fixed; top: 400px; right: 10px; z-index: 1;
    }
    }

    Mit position: relativ erscheint das Modul rechts auf der Position sidebar-right mit gelbem Hintergrund wie gewohnt.

    Es verschiebt sich synchron mit dem Content beim scrollen.


    Das Modul soll aber auf der Position sidebar-right fest/unbeweglich bleiben!

    Mit position: fixed funktioniert es jedenfalls nicht wie man hier sieht!

    Die gelbe sidebar-right geht über die volle Bildbreite abzüglich right: 10px.

    Das Modul steht zwar fest/unbeweglich aber in der Mitte des Bildschirms.


    Was mache ich falsch?


    VG

  • Versuchen Sie es so zu machen

    Code
    .grid-child.container-sidebar-right {
        position: relative;
        background: none;
    }
    
    .grid-child.container-sidebar-right > div {
        position: fixed;
        top: 300px;
        right: 10px;
    }
  • Es funktioniert, Danke!

    Aber warum?


    auf .grid-child weist mich der Inspector hin!

    Warum nochmal mit > div?


    Ich habe jetzt folgendes eingesetzt (obwohl mir 'sticky' besser gefäll)


    Code
    @media (min-width: 1024px) {
    .grid-child.container-sidebar-right {
    position: relative;
    background: #ffff00; /*none;*/ /*Zur Entwicklungszeit sehe ich wo ich  bin!*/
        }
    .grid-child.container-sidebar-right > div {
        position: fixed; top: 300px; right: 10px; z-index:10;
        /*position: sticky;  position: -webkit-sticky; top: 300px; right: 0px; z-index: 10;*/
        }
    }


    VG

  • Zitat

    "Es funktioniert, Danke!"

    "Warum?"

    Es sieht so aus, als ob du eine Frage zu CSS-Selektoren hast. Der Inspector zeigt dir, dass die Regel auf ein Element mit der Klasse ".grid-child" angewendet wird. Durch die Verwendung von "> div" beschränkst du die Regel auf direkte Kinder des Elements mit der Klasse ".grid-child", die div-Elemente sind.


    "sticky" ist ein anderer CSS-Eigenschaft, die verwendet werden kann, um Elemente auf der Seite fixiert zu halten, wenn der Benutzer scrollt. Du kannst es verwenden, anstatt "position: absolute" und "top: 0", um das gewünschte Verhalten zu erzielen.


    Viel Glück!