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!

    OOO... Direkt in diesem Forum gibt es ein Beispiel für CSS mit position: sticky;


    In Beiträgen, in denen es eine Code-Einfügung gibt. Sie können im Inspector mit dem Selektor .codeBox .codeBoxHeader gefunden werden.