{"id":15804,"date":"2025-10-22T11:12:22","date_gmt":"2025-10-22T09:12:22","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=15804"},"modified":"2025-11-03T14:53:19","modified_gmt":"2025-11-03T12:53:19","slug":"css-anchor-position-guia-practica-y-patrones","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/","title":{"rendered":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones"},"content":{"rendered":"<p data-start=\"540\" data-end=\"1087\">Durante a\u00f1os, <strong data-start=\"554\" data-end=\"598\"><a href=\"https:\/\/www.espai.es\/blog\/2021\/06\/todo-sobre-el-posicionamiento-css\/\">position: absolute<\/a>\/relative\/fixed\/sticky<\/strong> ha sido una fuente constante de dudas: <em data-start=\"638\" data-end=\"806\">\u00bfpor qu\u00e9 <code data-start=\"648\" data-end=\"658\">absolute<\/code> necesita un contenedor con <code data-start=\"686\" data-end=\"696\">relative<\/code>?, \u00bfpor qu\u00e9 mi tooltip \u201csalta\u201d fuera del viewport?, \u00bfc\u00f3mo anclo algo a otro elemento\u2026 si no es su contenedor?<\/em> En mis clases lo ve\u00eda a diario: sin JavaScript, construir un popup o un men\u00fa contextual era casi misi\u00f3n imposible, y en <strong data-start=\"927\" data-end=\"940\">WordPress<\/strong> el problema crec\u00eda por la <strong data-start=\"967\" data-end=\"991\">profundidad del HTML<\/strong> de muchas plantillas, que dificulta identificar el contenedor real y los <em data-start=\"1065\" data-end=\"1084\">stacking contexts<\/em>.<\/p>\n<p data-start=\"1089\" data-end=\"1566\">El nuevo <strong data-start=\"1098\" data-end=\"1124\">CSS Anchor Positioning<\/strong> cambia la conversaci\u00f3n: puedes <strong data-start=\"1156\" data-end=\"1190\">nombrar un elemento como ancla<\/strong> y posicionar otro <strong data-start=\"1209\" data-end=\"1226\">respecto a \u00e9l<\/strong>, sin exigir relaci\u00f3n de contenedor. Resultado: <strong data-start=\"1274\" data-end=\"1286\">menos JS<\/strong>, menos <em data-start=\"1294\" data-end=\"1301\">hacks<\/em> y una <strong data-start=\"1308\" data-end=\"1324\">carga mental<\/strong> m\u00e1s baja para el equipo. En esta gu\u00eda ver\u00e1s <strong data-start=\"1369\" data-end=\"1386\">cu\u00e1ndo usarlo<\/strong>, <strong data-start=\"1388\" data-end=\"1406\">c\u00f3mo aplicarlo<\/strong> paso a paso, <strong data-start=\"1420\" data-end=\"1444\">patrones productivos<\/strong> (tooltips, popovers, men\u00fas) y <strong data-start=\"1475\" data-end=\"1492\">anti-patrones<\/strong> que te ahorrar\u00e1n horas de depuraci\u00f3n, con foco especial en <strong data-start=\"1552\" data-end=\"1565\">WordPress<\/strong>.<\/p>\n<h2 data-start=\"1859\" data-end=\"1909\">Qu\u00e9 es CSS Anchor Positioning y por qu\u00e9 importa<\/h2>\n<p data-start=\"1910\" data-end=\"2027\"><strong data-start=\"1910\" data-end=\"1936\">CSS Anchor Positioning<\/strong> permite <strong data-start=\"1945\" data-end=\"1955\">anclar<\/strong> el posicionamiento de un elemento a otro elemento arbitrario, usando:<\/p>\n<ul data-start=\"2028\" data-end=\"2472\">\n<li data-start=\"2028\" data-end=\"2076\"><code data-start=\"2030\" data-end=\"2043\">anchor-name<\/code>: <strong data-start=\"2045\" data-end=\"2055\">nombra<\/strong> el elemento ancla.<\/li>\n<li data-start=\"2077\" data-end=\"2158\"><code data-start=\"2079\" data-end=\"2096\">position-anchor<\/code>: indica <strong data-start=\"2105\" data-end=\"2120\">a qu\u00e9 ancla<\/strong> se adhiere el elemento posicionado.<\/li>\n<li data-start=\"2159\" data-end=\"2252\">Funciones como <code data-start=\"2176\" data-end=\"2186\">anchor()<\/code> y <code data-start=\"2189\" data-end=\"2204\">anchor-size()<\/code> para <strong data-start=\"2210\" data-end=\"2239\">leer posiciones y tama\u00f1os<\/strong> del ancla.<\/li>\n<li data-start=\"2253\" data-end=\"2472\">Reglas como <code data-start=\"2267\" data-end=\"2282\">@position-try<\/code> y propiedades <code data-start=\"2297\" data-end=\"2311\">position-try<\/code>, <code data-start=\"2313\" data-end=\"2333\">position-try-order<\/code>, <code data-start=\"2335\" data-end=\"2356\">position-visibility<\/code> para <strong data-start=\"2362\" data-end=\"2391\">recolocar autom\u00e1ticamente<\/strong> el elemento si la posici\u00f3n preferida no cabe (p. ej., inversi\u00f3n arriba\/abajo).<\/li>\n<\/ul>\n<blockquote data-start=\"2473\" data-end=\"2539\">\n<p data-start=\"2475\" data-end=\"2539\">Referencia oficial: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/anchor\" target=\"_blank\" rel=\"noopener\">MDN \u2013 <em data-start=\"2501\" data-end=\"2525\">CSS anchor positioning<\/em> y <code data-start=\"2528\" data-end=\"2538\">anchor()<\/code><\/a>.<\/p>\n<\/blockquote>\n<p data-start=\"2541\" data-end=\"2560\"><strong data-start=\"2541\" data-end=\"2559\">Ventajas clave<\/strong>:<\/p>\n<ul data-start=\"2561\" data-end=\"2880\">\n<li data-start=\"2561\" data-end=\"2630\"><strong data-start=\"2563\" data-end=\"2590\">Menos dependencia de JS<\/strong> para UI flotante (tooltips\/popovers).<\/li>\n<li data-start=\"2631\" data-end=\"2708\"><strong data-start=\"2633\" data-end=\"2665\">Independencia del contenedor<\/strong>: el ancla puede estar \u201clejos\u201d en el DOM.<\/li>\n<li data-start=\"2709\" data-end=\"2787\"><strong data-start=\"2711\" data-end=\"2736\">Patrones declarativos<\/strong>: reposicionamiento autom\u00e1tico con <em data-start=\"2771\" data-end=\"2784\">try tactics<\/em>.<\/li>\n<li data-start=\"2788\" data-end=\"2880\"><strong data-start=\"2790\" data-end=\"2802\">Mejor DX<\/strong> (Developer Experience) y menor <em data-start=\"2834\" data-end=\"2852\">layout thrashing<\/em> cuando el sistema recoloca.<\/li>\n<\/ul>\n<p><strong data-start=\"2882\" data-end=\"2910\">Consideraci\u00f3n de soporte<\/strong>: hoy su disponibilidad a\u00fan es <strong data-start=\"2941\" data-end=\"2953\">limitada<\/strong> y conviene aplicarlo con <strong data-start=\"2979\" data-end=\"3006\">progressive enhancement<\/strong> (ver patr\u00f3n m\u00e1s abajo).<\/p>\n<h2 data-start=\"3037\" data-end=\"3098\">Antes vs. ahora: del <code data-start=\"3061\" data-end=\"3071\">position<\/code> cl\u00e1sico al anclaje moderno<\/h2>\n<h3 data-start=\"3100\" data-end=\"3123\">El problema cl\u00e1sico<\/h3>\n<p data-start=\"3124\" data-end=\"3588\">Con <code data-start=\"3128\" data-end=\"3138\">absolute<\/code>, el sistema calcula posiciones <strong data-start=\"3170\" data-end=\"3208\">respecto al contenedor posicionado<\/strong> (el primer ancestro con <code data-start=\"3233\" data-end=\"3243\">position<\/code> distinto de <code data-start=\"3256\" data-end=\"3264\">static<\/code>). Si tu tooltip depende de un bot\u00f3n que <strong data-start=\"3305\" data-end=\"3311\">no<\/strong> es ese contenedor, llega el festival de <em data-start=\"3352\" data-end=\"3362\">wrappers<\/em>, <code data-start=\"3364\" data-end=\"3375\">transform<\/code> que crean nuevos contextos, o <em data-start=\"3406\" data-end=\"3423\">event listeners<\/em> para calcular offsets con JS. En <strong data-start=\"3457\" data-end=\"3480\">themes de WordPress<\/strong>, donde el HTML es profundo, entender <strong data-start=\"3518\" data-end=\"3549\">qui\u00e9n es el contenedor real<\/strong> se convierte en una <em data-start=\"3570\" data-end=\"3587\">arqueolog\u00eda DOM<\/em>.<\/p>\n<h3 data-start=\"3590\" data-end=\"3623\">El giro de Anchor Positioning<\/h3>\n<p data-start=\"3624\" data-end=\"3812\">Ahora <strong data-start=\"3630\" data-end=\"3661\">nombras el bot\u00f3n como ancla<\/strong> y <strong data-start=\"3664\" data-end=\"3693\">pegas el tooltip al bot\u00f3n<\/strong>, no al contenedor. <strong data-start=\"3713\" data-end=\"3729\">No necesitas<\/strong> reestructurar el DOM ni a\u00f1adir <code data-start=\"3761\" data-end=\"3781\">position: relative<\/code> en una cadena de contenedores.<\/p>\n<h2 data-start=\"3819\" data-end=\"3882\">Primer ejemplo: tooltip m\u00ednimo con <code data-start=\"3857\" data-end=\"3867\">anchor()<\/code> (con fallback)<\/h2>\n<h3 data-start=\"3884\" data-end=\"3892\">HTML<\/h3>\n<pre>&lt;button class=\"btn\" aria-describedby=\"t1\"&gt;Comprar&lt;\/button&gt;\r\n&lt;div id=\"t1\" role=\"tooltip\" class=\"tooltip\"&gt;A\u00f1adir al carrito&lt;\/div&gt;<\/pre>\n<h3>CSS (progressive enhancement)<\/h3>\n<pre>\/* 1) Estilos base (funciona en todos los navegadores) *\/\r\n.btn { inline-size: auto; }\r\n.tooltip {\r\n    position: absolute;\r\n    \/* Fallback cl\u00e1sico: debajo del bot\u00f3n con JS ligero o posici\u00f3n aproximada *\/\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transform: translateY(0.5rem);\r\n}\r\n\r\n\/* 2) Activaci\u00f3n por enfoque\/hover (accesible) *\/\r\n.btn:focus + .tooltip,\r\n.btn:hover + .tooltip { opacity: 1; }\r\n\r\n\/* 3) Anchor Positioning si hay soporte *\/\r\n@supports (position-anchor: --x) {\r\n  \/* Nombramos el ancla en el TRIGGER *\/\r\n  .btn { anchor-name: --trigger; }\r\n\r\n  \/* El tooltip se ancla al trigger *\/\r\n  .tooltip {\r\n      position-anchor: --trigger;\r\n      \/* Colocar bajo el ancla, centrado horizontal *\/\r\n      top: anchor(bottom);\r\n      left: anchor(center);\r\n      transform: translate(-50%, 0.5rem);\r\n  }\r\n}<\/pre>\n<p data-start=\"4852\" data-end=\"5234\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor.webp\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-15812 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor-1024x683.webp\" alt=\"css anchor position, tooltip alineado bajo un bot\u00f3n con anchor(bottom) y centrado con anchor(center)\" width=\"894\" height=\"596\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor-1024x683.webp 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor-300x200.webp 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor-768x512.webp 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor-700x467.webp 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-alinear-boton-con-anchor.webp 1536w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/a><\/p>\n<p data-start=\"4852\" data-end=\"5234\"><strong data-start=\"4852\" data-end=\"4869\">Qu\u00e9 pasa aqu\u00ed<\/strong>: el bot\u00f3n <strong data-start=\"4880\" data-end=\"4890\">define<\/strong> <code data-start=\"4891\" data-end=\"4915\">anchor-name: --trigger<\/code>. El tooltip usa <code data-start=\"4932\" data-end=\"4960\">position-anchor: --trigger<\/code> y consulta <code data-start=\"4972\" data-end=\"4995\">anchor(bottom\/center)<\/code> para alinearse <strong data-start=\"5011\" data-end=\"5030\">bajo y centrado<\/strong> respecto al bot\u00f3n. Si el navegador no soporta la feature, el bloque <code data-start=\"5099\" data-end=\"5110\">@supports<\/code> no aplica y te quedas con un <strong data-start=\"5140\" data-end=\"5152\">fallback<\/strong> (p. ej., un peque\u00f1o script que posicione el tooltip o una colocaci\u00f3n aproximada).<\/p>\n<h2 data-start=\"5369\" data-end=\"5434\">Reposicionamiento autom\u00e1tico: <code data-start=\"5402\" data-end=\"5417\">@position-try<\/code> y <code data-start=\"5420\" data-end=\"5434\">position-try<\/code><\/h2>\n<p data-start=\"5435\" data-end=\"5543\">Cuando el tooltip no cabe <strong data-start=\"5461\" data-end=\"5471\">debajo<\/strong>, la UI debe <strong data-start=\"5484\" data-end=\"5499\">recolocarse<\/strong> arriba. Con Anchor Positioning lo declaras:<\/p>\n<pre>@supports (position-anchor: --x) {\r\n  \/* Definimos estrategias nombradas *\/\r\n  @position-try --below {\r\n      \/* \"\u00c1rea\" inferior del ancla *\/\r\n      inset-area: bottom;\r\n  }\r\n  @position-try --above {\r\n      inset-area: top;\r\n  }\r\n\r\n  .btn { anchor-name: --trigger; }\r\n\r\n  .tooltip {\r\n      position-anchor: --trigger;\r\n\r\n      \/* Estrategia preferida y alternativas *\/\r\n      position-try: --below, --above;\r\n\r\n      \/* Ajustes finos apoyados en anchor() *\/\r\n      left: anchor(center);\r\n      transform: translate(-50%, 0.5rem);\r\n  }\r\n}<\/pre>\n<p>Con esto, el navegador <strong data-start=\"6079\" data-end=\"6090\">intenta<\/strong> colocar el tooltip <strong data-start=\"6110\" data-end=\"6120\">debajo<\/strong>; si no hay espacio, <strong data-start=\"6141\" data-end=\"6158\">prueba arriba<\/strong> autom\u00e1ticamente. Puedes a\u00f1adir m\u00e1s variantes (izquierda\/derecha) y ordenar intentos con <code data-start=\"6247\" data-end=\"6267\">position-try-order<\/code>.<\/p>\n<h2 data-start=\"6275\" data-end=\"6334\">Ejemplo 2: popover alineado al borde con <code data-start=\"6319\" data-end=\"6334\">anchor-size()<\/code><\/h2>\n<p data-start=\"6335\" data-end=\"6387\">Para men\u00fas que deben <strong data-start=\"6356\" data-end=\"6376\">igualar el ancho<\/strong> del bot\u00f3n:<\/p>\n<pre>@supports (position-anchor: --x) {\r\n  .btn { anchor-name: --menu-trigger; }\r\n\r\n  .menu {\r\n      position: absolute;\r\n      position-anchor: --menu-trigger;\r\n\r\n      \/* Alinear borde izquierdo y copiar el ancho del trigger *\/\r\n      left: anchor(left);\r\n      width: anchor-size(width);\r\n      top: anchor(bottom);\r\n      transform: translateY(0.25rem);\r\n  }\r\n}<\/pre>\n<p><code data-start=\"6735\" data-end=\"6755\">anchor-size(width)<\/code> toma el <strong data-start=\"6764\" data-end=\"6783\">ancho del ancla<\/strong> y lo aplica al men\u00fa, evitando c\u00e1lculos JS y <em data-start=\"6828\" data-end=\"6837\">reflows<\/em> manuales.<\/p>\n<h2 data-start=\"6854\" data-end=\"6900\">Anti-patrones frecuentes (y c\u00f3mo evitarlos)<\/h2>\n<ol data-start=\"6902\" data-end=\"7690\">\n<li data-start=\"6902\" data-end=\"7030\">\n<p data-start=\"6905\" data-end=\"6945\"><strong data-start=\"6905\" data-end=\"6943\">Olvidar el progressive enhancement<\/strong><\/p>\n<ul data-start=\"6949\" data-end=\"7030\">\n<li data-start=\"6949\" data-end=\"7030\">Envu\u00e9lvelo con <code data-start=\"6968\" data-end=\"7002\">@supports (position-anchor: --x)<\/code> y no rompas la UI b\u00e1sica.<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"7031\" data-end=\"7188\">\n<p data-start=\"7034\" data-end=\"7077\"><strong data-start=\"7034\" data-end=\"7075\">Confiar en transformaciones del ancla<\/strong><\/p>\n<ul data-start=\"7081\" data-end=\"7188\">\n<li data-start=\"7081\" data-end=\"7188\"><code data-start=\"7083\" data-end=\"7094\">transform<\/code> en el ancla puede crear nuevos contextos; comprueba que la medici\u00f3n no se vuelva contra ti.<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"7189\" data-end=\"7366\">\n<p data-start=\"7192\" data-end=\"7219\"><strong data-start=\"7192\" data-end=\"7217\">Ignorar accesibilidad<\/strong><\/p>\n<ul data-start=\"7223\" data-end=\"7366\">\n<li data-start=\"7223\" data-end=\"7366\">Tooltips\/popovers necesitan <strong data-start=\"7253\" data-end=\"7267\">roles ARIA<\/strong>, <strong data-start=\"7269\" data-end=\"7288\">gesti\u00f3n de foco<\/strong> y <strong data-start=\"7291\" data-end=\"7313\">escapado con <code data-start=\"7306\" data-end=\"7311\">Esc<\/code><\/strong>. El posicionamiento no soluciona A11y por s\u00ed solo.<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"7367\" data-end=\"7558\">\n<p data-start=\"7370\" data-end=\"7404\"><strong data-start=\"7370\" data-end=\"7402\">Profundidad DOM en WordPress<\/strong><\/p>\n<ul data-start=\"7408\" data-end=\"7558\">\n<li data-start=\"7408\" data-end=\"7558\">No \u201cpelees\u201d con el contenedor: <strong data-start=\"7441\" data-end=\"7460\">nombra el ancla<\/strong> en el componente <em data-start=\"7478\" data-end=\"7487\">trigger<\/em> (bot\u00f3n, icono del men\u00fa) y posiciona desde cualquier parte del \u00e1rbol.<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"7559\" data-end=\"7690\">\n<p data-start=\"7562\" data-end=\"7594\"><strong data-start=\"7562\" data-end=\"7592\">No probar overflows reales<\/strong><\/p>\n<ul data-start=\"7598\" data-end=\"7690\">\n<li data-start=\"7598\" data-end=\"7690\">Usa <code data-start=\"7604\" data-end=\"7619\">@position-try<\/code> con variantes para <strong data-start=\"7639\" data-end=\"7661\">pantallas peque\u00f1as<\/strong> y contenedores con <em data-start=\"7681\" data-end=\"7689\">scroll<\/em>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2 data-start=\"7697\" data-end=\"7760\">WordPress en producci\u00f3n: truco para themes con HTML profundo<\/h2>\n<p data-start=\"7761\" data-end=\"7877\">En block themes, el bot\u00f3n puede estar dentro de varios <em data-start=\"7816\" data-end=\"7826\">wrappers<\/em>. No pasa nada: el <strong data-start=\"7845\" data-end=\"7854\">ancla<\/strong> sigue siendo el bot\u00f3n.<\/p>\n<pre>&lt;!-- Bloque de Bot\u00f3n --&gt;\r\n&lt;div class=\"wp-block-buttons\"&gt;\r\n   &lt;div class=\"wp-block-button is-style-fill\"&gt;\r\n      &lt;a class=\"wp-element-button btn--cta\"&gt;Comprar&lt;\/a&gt;\r\n   &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;!-- En otra zona del template --&gt;\r\n&lt;div class=\"popover\" id=\"buy-popover\"&gt;Producto a\u00f1adido \u2713&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<pre>\/* 1) Etiqueta el trigger como ancla *\/\r\n.btn--cta { anchor-name: --buy; }\r\n\r\n\/* 2) El popover puede vivir en otro wrapper: no importa *\/\r\n@supports (position-anchor: --x) {\r\n  .popover {\r\n      position: fixed; \/* o absolute: depende de tu dise\u00f1o *\/\r\n      position-anchor: --buy; \/* se ancla al bot\u00f3n *\/\r\n      top: anchor(bottom);\r\n      right: anchor(right); \/* alineado al borde derecho del bot\u00f3n *\/\r\n      transform: translateY(0.5rem);\r\n  }\r\n}<\/pre>\n<p data-start=\"8619\" data-end=\"8630\"><strong data-start=\"8619\" data-end=\"8629\">Claves<\/strong>:<\/p>\n<ul data-start=\"8631\" data-end=\"8922\">\n<li data-start=\"8631\" data-end=\"8768\">Puedes usar <code data-start=\"8645\" data-end=\"8662\">position: fixed<\/code> si el patr\u00f3n lo requiere (HUD flotante, barra fija) manteniendo el <strong data-start=\"8730\" data-end=\"8751\">anclaje sem\u00e1ntico<\/strong> al bot\u00f3n real.<\/li>\n<li data-start=\"8769\" data-end=\"8852\">En <strong data-start=\"8774\" data-end=\"8787\">Gutenberg<\/strong>, a\u00f1ade la clase <code data-start=\"8804\" data-end=\"8814\">btn--cta<\/code> desde el panel avanzado del bloque.<\/li>\n<li data-start=\"8853\" data-end=\"8922\">Para dise\u00f1o responsivo, combina <code data-start=\"8887\" data-end=\"8901\">position-try<\/code> con <em data-start=\"8906\" data-end=\"8921\">media queries<\/em>.<\/li>\n<\/ul>\n<h2 data-start=\"8929\" data-end=\"8986\">Accesibilidad m\u00ednima y JS opcional (solo para mejorar)<\/h2>\n<ul data-start=\"8987\" data-end=\"9298\">\n<li data-start=\"8987\" data-end=\"9088\"><strong data-start=\"8989\" data-end=\"9011\">Roles y relaciones<\/strong>: <code data-start=\"9013\" data-end=\"9031\">aria-describedby<\/code> (tooltip) o <code data-start=\"9044\" data-end=\"9059\">aria-controls<\/code>\/<code data-start=\"9060\" data-end=\"9075\">aria-expanded<\/code> (popover).<\/li>\n<li data-start=\"9089\" data-end=\"9189\"><strong data-start=\"9091\" data-end=\"9109\">Foco y teclado<\/strong>: abre con <code data-start=\"9120\" data-end=\"9135\">Enter\/Espacio<\/code>, cierra con <strong data-start=\"9148\" data-end=\"9155\">Esc<\/strong>, devuelve el foco al <em data-start=\"9177\" data-end=\"9186\">trigger<\/em>.<\/li>\n<li data-start=\"9190\" data-end=\"9298\"><strong data-start=\"9192\" data-end=\"9204\">JS Light<\/strong>: usa JS solo para <strong data-start=\"9223\" data-end=\"9244\">gesti\u00f3n de estado<\/strong>; deja el <strong data-start=\"9254\" data-end=\"9279\">posicionamiento a CSS<\/strong>. Un patr\u00f3n t\u00edpico:<\/li>\n<\/ul>\n<pre>const trigger = document.querySelector('.btn');\r\nconst tooltip = document.getElementById('t1');\r\n\r\ntrigger.addEventListener('focus', () =&gt; tooltip.dataset.open = 'true');\r\ntrigger.addEventListener('blur', () =&gt; tooltip.dataset.open = 'false');\r\ntrigger.addEventListener('mouseenter', () =&gt; tooltip.dataset.open = 'true');\r\ntrigger.addEventListener('mouseleave', () =&gt; tooltip.dataset.open = 'false');<\/pre>\n<pre>.tooltip { opacity: 0; }\r\n.tooltip[data-open=\"true\"] { opacity: 1; }<\/pre>\n<h2 data-start=\"9792\" data-end=\"9829\">Checklist de implementaci\u00f3n r\u00e1pida<\/h2>\n<ul class=\"contains-task-list\" data-start=\"9830\" data-end=\"10318\">\n<li class=\"task-list-item\" data-start=\"9830\" data-end=\"9887\">Definir <strong data-start=\"9844\" data-end=\"9861\"><code data-start=\"9846\" data-end=\"9859\">anchor-name<\/code><\/strong> en el elemento trigger.<\/li>\n<li class=\"task-list-item\" data-start=\"9888\" data-end=\"9941\">Aplicar <strong data-start=\"9902\" data-end=\"9923\"><code data-start=\"9904\" data-end=\"9921\">position-anchor<\/code><\/strong> en el flotante.<\/li>\n<li class=\"task-list-item\" data-start=\"9942\" data-end=\"10031\">Posicionar con <strong data-start=\"9963\" data-end=\"9977\"><code data-start=\"9965\" data-end=\"9975\">anchor()<\/code><\/strong> y, si procede, dimensionar con <strong data-start=\"10009\" data-end=\"10028\"><code data-start=\"10011\" data-end=\"10026\">anchor-size()<\/code><\/strong>.<\/li>\n<li class=\"task-list-item\" data-start=\"10032\" data-end=\"10102\">A\u00f1adir <strong data-start=\"10045\" data-end=\"10064\"><code data-start=\"10047\" data-end=\"10062\">@position-try<\/code><\/strong> para recolocar en caso de overflow.<\/li>\n<li class=\"task-list-item\" data-start=\"10103\" data-end=\"10175\">Encapsular en <strong data-start=\"10123\" data-end=\"10138\"><code data-start=\"10125\" data-end=\"10136\">@supports<\/code><\/strong> y dejar un <strong data-start=\"10150\" data-end=\"10162\">fallback<\/strong> funcional.<\/li>\n<li class=\"task-list-item\" data-start=\"10176\" data-end=\"10247\">Revisar <strong data-start=\"10190\" data-end=\"10198\">A11y<\/strong> (roles, foco, teclado) y <strong data-start=\"10224\" data-end=\"10244\">z-index\/stacking<\/strong>.<\/li>\n<li class=\"task-list-item\" data-start=\"10248\" data-end=\"10318\">Probar en <strong data-start=\"10264\" data-end=\"10288\">plantillas profundas<\/strong> (WordPress) y en <strong data-start=\"10306\" data-end=\"10317\">m\u00f3viles<\/strong>.<\/li>\n<\/ul>\n<p data-start=\"10717\" data-end=\"11268\"><strong data-start=\"10717\" data-end=\"10740\">CSS Anchor Position<\/strong> trae un enfoque <strong data-start=\"10757\" data-end=\"10782\">declarativo y robusto<\/strong> para UI flotante: anclas sem\u00e1nticas, menos JS, y recolocaci\u00f3n inteligente. En escenarios reales \u2014sobre todo en <strong data-start=\"10894\" data-end=\"10907\">WordPress<\/strong> con HTML profundo\u2014 reduce el <strong data-start=\"10937\" data-end=\"10953\">acoplamiento<\/strong> al contenedor y simplifica la <strong data-start=\"10984\" data-end=\"11013\">experiencia de desarrollo<\/strong>. Si vienes del \u201cmundo <code data-start=\"11036\" data-end=\"11055\">absolute\/relative<\/code>\u201d, pensar en <strong data-start=\"11068\" data-end=\"11092\">anclar a un elemento<\/strong> (y no a un contenedor) te abrir\u00e1 patrones m\u00e1s limpios y mantenibles. Empieza por tooltips y popovers, a\u00f1ade <code data-start=\"11201\" data-end=\"11216\">@position-try<\/code> y ver\u00e1s c\u00f3mo la UI deja de luchar contra el layout.<\/p>\n<p>Si te interesa llevar estos conceptos al siguiente nivel y aprender a crear interfaces din\u00e1micas con HTML, CSS y JavaScript desde cero, inscr\u00edbete en el <a href=\"https:\/\/espai.es\/curso\/curso-de-programacion-web\/\" target=\"_blank\" rel=\"noopener\">Curso de Programaci\u00f3n Web de Escuela Espai<\/a>. Es una formaci\u00f3n completa donde practicar\u00e1s posicionamiento, animaciones, responsive design y las bases del desarrollo front-end moderno.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante a\u00f1os, position: absolute\/relative\/fixed\/sticky ha sido una fuente constante de dudas: \u00bfpor qu\u00e9 absolute necesita un contenedor con relative?, \u00bfpor qu\u00e9 mi tooltip \u201csalta\u201d fuera del viewport?, \u00bfc\u00f3mo anclo algo a otro elemento\u2026 si no es su contenedor? En mis clases lo ve\u00eda a diario:&#8230;<\/p>\n","protected":false},"author":33,"featured_media":15829,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-15804","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-22T09:12:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-03T12:53:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones\",\"datePublished\":\"2025-10-22T09:12:22+00:00\",\"dateModified\":\"2025-11-03T12:53:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\"},\"wordCount\":1007,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\",\"name\":\"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp\",\"datePublished\":\"2025-10-22T09:12:22+00:00\",\"dateModified\":\"2025-11-03T12:53:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp\",\"width\":1000,\"height\":667,\"caption\":\"Ilustraci\u00f3n colorida en estilo plano de un peque\u00f1o velero flotando sobre el mar turquesa, sujeto por una gran ancla en el fondo marino \u2014 met\u00e1fora visual del funcionamiento de CSS Anchor Position.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai","description":"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/","og_locale":"es_ES","og_type":"article","og_title":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai","og_description":"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!","og_url":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/","og_site_name":"Blog Escola Espai","article_published_time":"2025-10-22T09:12:22+00:00","article_modified_time":"2025-11-03T12:53:19+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","type":"image\/webp"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones","datePublished":"2025-10-22T09:12:22+00:00","dateModified":"2025-11-03T12:53:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/"},"wordCount":1007,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/","url":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/","name":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","datePublished":"2025-10-22T09:12:22+00:00","dateModified":"2025-11-03T12:53:19+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"CSS Anchor Position explicado: ancla elementos a otros sin JS, patrones @position-try, anchor() y anchor-size(). \u00a1Descubre tu gu\u00eda pr\u00e1ctica!","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","width":1000,"height":667,"caption":"Ilustraci\u00f3n colorida en estilo plano de un peque\u00f1o velero flotando sobre el mar turquesa, sujeto por una gran ancla en el fondo marino \u2014 met\u00e1fora visual del funcionamiento de CSS Anchor Position."},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2025\/10\/css-anchor-position-guia-practica-y-patrones\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Anchor Position: gu\u00eda pr\u00e1ctica y patrones"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/10\/css-anchor-position-ilustracion-barco.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=15804"}],"version-history":[{"count":15,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15804\/revisions"}],"predecessor-version":[{"id":15831,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15804\/revisions\/15831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/15829"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=15804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=15804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=15804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}