<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!DOCTYPE html&gt;
&lt;html lang="cs"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;CSS Anchor Positioning Demo 2026&lt;/title&gt;
    &lt;style&gt;
        /* 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;
        }
        */
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;section&gt;Scrollujte dolů k růžovému tooltipu...&lt;/section&gt;
    
    &lt;ul&gt;
        &lt;li&gt;
            &lt;div&gt;AAA (Kotva)&lt;/div&gt;
            &lt;span&gt;BBB (Tooltip - přeskakuje nahoru/dolů)&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;section&gt;Scrollujte zpět nahoru...&lt;/section&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>