Kcko · February 14, 2026 16:14
diff --git a/index.txt b/index.txt
 https://jsbin.com/qiyeriziyi/edit?html,css,output
 https://jsbin.com/jewegaseyo/edit?html,css,output
diff --git a/index1.html b/index1.html
 <!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>
diff --git a/index2.html b/index2.html
 <!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>
	https://jsbin.com/qiyeriziyi/edit?html,css,output
	https://jsbin.com/jewegaseyo/edit?html,css,output
	<!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>