/ Gists / Css anchor example
On gists

Css anchor example

•
CSS

index1.html Raw # 

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>CSS Anchor Positioning Demo 2026</title>
    <style>
        /* Pomocný styling pro demo */
        body {
            margin: 0;
            font-family: sans-serif;
        }

        section {
            height: 100vh;
            background: orange;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }

        ul {
            padding: 50px;
            background: #eee;
        }

        /* DEFINICE KOTVY (Anchor) */
        li {
            anchor-name: --li; 
            border: 2px solid black;
            min-height: 300px;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            /* POZOR: Nesmí zde být position: relative, jinak span kotvu neuvidí */
        }

        /* DEFINICE POZICOVANÉHO PRVKU (Target) */
        span {
            all: unset; /* Vyčištění výchozích stylů */
            display: block;
            background: pink;
            width: fit-content;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            font-weight: bold;


            /* Propojení s kotvou */
            position: fixed;        /* Vztahuje se k viewportu (nutné pro flip)  */
            position-anchor: --li;  /* Jméno kotvy  */
            
            /* Výchozí pozice: NAHOŘE  */
            position-area: top;     
            
            /* AUTOMATICKÉ PŘEKLOPENÍ  */
            /* flip-block automaticky změní 'top' na 'bottom', když nahoře dojde místo */
            position-try-fallbacks: flip-block; 
            
            /* Volitelné: Plynulý přechod pozice (podporováno od Chrome 129+) [1, 2] */
            transition: position-area 0.3s;
        }

        /* Ukázka, jak by vypadalo ruční přepsání přes @position-try, 
           pokud byste nepoužil flip-block:
        
        @position-try --dolu {
            position-area: bottom;
            margin-top: 10px;
        }
        */
    </style>
</head>
<body>

    <section>Scrollujte dolů k růžovému tooltipu...</section>
    
    <ul>
        <li>
            <div>AAA (Kotva)</div>
            <span>BBB (Tooltip - přeskakuje nahoru/dolů)</span>
        </li>
    </ul>
    
    <section>Scrollujte zpět nahoru...</section>

</body>
</html>

index2.html Raw # 

<!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>

index.txt Raw # 

https://jsbin.com/qiyeriziyi/edit?html,css,output
https://jsbin.com/jewegaseyo/edit?html,css,output