<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>CSS Anchor Positioning: Manual Insets</title>
    <style>
        body { margin: 0; font-family: sans-serif; height: 300vh; }
        section { height: 80vh; background: orange; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; }

        li {
            anchor-name: --li;
            border: 2px solid black;
            height: 300px;
            margin: 100px;
            list-style: none;
            background: white;
        }

        span {
            position: fixed;
            position-anchor: --li;
            
            /* RUČNÍ POZICOVÁNÍ: Tooltip nahoře */
            bottom: anchor(top);      /* Spodek tooltipu na vršek kotvy [1, 2] */
            left: anchor(left);       /* Levá hrana tooltipu na levou hranu kotvy [2] */
            
            background: pink;
            padding: 1rem;
            border-radius: 8px;
            font-weight: bold;

            /* DEFINICE FALLBACKŮ */
            position-try-fallbacks: --dole;

            /* PLYNULÁ ANIMACE: Protože animujeme 'top'/'bottom', bude tooltip klouzat  */
            transition: top 0.4s ease-in-out, bottom 0.4s ease-in-out;
        }

        /* VLASTNÍ PRAVIDLO PRO POZICI DOLE */
        @position-try --dole {
            /* Musíme zrušit původní 'bottom' a nastavit 'top'  */
            bottom: auto;             
            top: anchor(bottom);      /* Vršek tooltipu na spodek kotvy  */
            
            /* Můžeme přidat i odsazení specifické jen pro tuto pozici  */
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <section>Scrollujte dolů...</section>
    
    <ul>
        <li>
            <span>Tooltip (ruční insets)</span>
        </li>
    </ul>

    <section>Scrollujte dál...</section>

</body>
</html>