Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 12483, member: 3917"]
Inzwischen verstehe ich das Ganze wesentlich besser. Die sticky-Elemente verschieben sich nur innerhalb des Elterncontainers, nicht über dessen Grenzen hinaus. Und deshalb funktioniert es bei deinem Code mit dem "sticky top" weil sich der Elterncontainer nach unten ausdehnt und dort Platz ist.
Drehe ich das Ganze um, so dass der Elterncontainer unten liegt und sich nach oben ausdehnt, so ist auch das Verhalten der sticky-Elemente umgekehrt: Jetzt funktioniert der "sticky top" nicht, weil er sofort am Rand des Containers anstößt und der "sticky bottom" kann nach oben wandern weil dort Platz ist.
[CODE]<!DOCTYPE html>

<html>

<body>
    <div id='div_inhalt' style='display:flex; flex-direction:column;'>
        <div id='div_oben' style='background-color:#f77; height:50px;'>
            oben
        </div>
        
        <div id='div_mitte' style='border:red 2px dashed; display:flex;'>
            <div id='div_links' style='display:flex; flex-direction:column; justify-content:flex-end;'>
                
                
                <div id='div_linksmitte' style='background-color:#7b7; flex:1;
                display:flex; flex-direction:column; justify-content:flex-end;'>
                    links mitte
                    <div style='border:1px solid red; position:sticky; top:10px;'>
                        sticky top
                    </div>
                    <div style='border:1px dashed red; position:sticky; bottom:10px;'>
                        sticky bottom
                    </div>
                </div>
                
                <div id="div_linksunten" style="height: 900px;"></div>
                
            </div>

<div id='div_mittemitte' style='background-color:#59f; flex-grow:2; height:2500px;'>
                mitte mitte
            </div>
            
            <div id='div_rechts' style='background-color:#ff7;'>
                rechts
            </div>
            
        </div>
        
        <div id='div_unten' style='background-color:#f7f; height:100px;'>
            unten
        </div>
        
    </div>
    
</body>

</html>[/CODE]
[/QUOTE]

Authentifizierung