---
title: "CSS Anchor Positioning: Cómo posicionar elementos de forma nativa sin JavaScript"
description: "Valencia, 11/10/2026, G.B. Durante mucho tiempo, colocar elementos flotantes como tooltips, menús desplegables o modales ha sido un pequeño quebradero de cabeza. Al final, siempre acababas tirando de..."
url: https://indaga.net/css-anchor-positioning-como-posicionar-elementos-de-forma-nativa-sin-javascript/
date: 2026-10-11
modified: 2026-10-11
author: "Directorio Indaga"
image: https://indaga.net/wp-content/uploads/2026/10/josh-corneu.jpg
categories: ["CSS", "Recursos y Utilidades"]
tags: ["blog", "cascading style sheets", "css", "css anchor positioning", "posicionamiento elementos flotantes"]
type: post
lang: es
---

# CSS Anchor Positioning: Cómo posicionar elementos de forma nativa sin JavaScript

Valencia, 11/10/2026, G.B.

Durante mucho tiempo, colocar elementos flotantes como tooltips, menús desplegables o modales ha sido un pequeño quebradero de cabeza. Al final, siempre acababas tirando de librerías de terceros en JavaScript para calcular las coordenadas exactas y evitar que el menú se saliera de la pantalla al hacer scroll o redimensionar la ventana. Por suerte, la especificación web moderna nos trae una solución nativa fantástica: **CSS Anchor Positioning**.

Este artículo toma como referencia y se inspira en la excelente guía técnica sobre posicionamiento por anclaje publicada por [Josh W. Comeau en su blog](https://www.joshwcomeau.com/css/anchor-positioning/).

## ¿Cómo funciona el anclaje nativo en CSS?

La idea es tan simple como conectar dos puntos mediante etiquetas en nuestra hoja de estilos. Por un lado, le decimos a nuestro elemento de referencia cuál es su nombre de ancla y, por otro, vinculamos el elemento flotante a ese nombre.

Imagina que tenemos un botón clásico y queremos mostrar una pequeña etiqueta emergente justo al lado:

```
/* 1. Declaramos el nombre del ancla en el elemento de referencia */
.mi-boton {
  anchor-name: --boton-guardar;
}

/* 2. Vinculamos el elemento flotante al ancla */
.tooltip-nativo {
  position: absolute;
  position-anchor: --boton-guardar;
  bottom: anchor(--boton-guardar top);
  left: anchor(--boton-guardar center);
  transform: translateX(-50%);
}
```

Con apenas unas líneas de CSS puro, el navegador se encarga de hacer todo el trabajo matemático por nosotros, sin necesidad de cargar scripts pesados en segundo plano.

## ¿Por qué nos interesa en proyectos minimalistas como Indaga.net?

Para los que nos gusta mantener los sitios limpios y sin dependencias innecesarias, esta característica encaja de maravilla por varios motivos:

- **Cero dependencias de JavaScript:** Al delegar el cálculo de coordenadas directamente al motor del navegador, ganamos en rendimiento y ligereza (Core Web Vitals).
- **Fluidez total:** El elemento flotante se adapta de forma fluida a los cambios de tamaño, desplazamiento y rotación de la pantalla de manera completamente nativa.
- **Mantenimiento sencillo:** Se reducen drásticamente las líneas de código necesarias para crear componentes interactivos.

Si quieres profundizar en todos los detalles técnicos, casos de uso avanzados y la compatibilidad actual entre los diferentes navegadores, te recomiendo echarle un vistazo al [artículo original de Josh W. Comeau](https://www.joshwcomeau.com/css/anchor-positioning/).

+ info en: [https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using)

Hacer pruebas en [https://developer.mozilla.org/en-US/play](https://developer.mozilla.org/en-US/play)

Copia y pega ese código:

```
<style>
  .indaga-demo-wrapper {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin: 2.5rem 0;
    position: relative;
  }

  /* 1. Declaramos el ancla utilizando la propiedad moderna */
  .btn-indaga-info {
    anchor-name: --mi-ancla-tooltip;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-indaga-info:hover {
    background-color: #1d4ed8;
  }

  /* 2. Vinculamos el tooltip flotante usando position-anchor */
  .tooltip-flotante {
    position: absolute;
    position-anchor: --mi-ancla-tooltip;
    
    /* Posicionamiento anclado nativo */
    bottom: anchor(top);
    left: anchor(center);
    transform: translateX(-50%);
    margin-bottom: 10px;

    /* Estilos visuales limpios */
    background: #0f172a;
    color: #ffffff;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Control de visibilidad mediante hover */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .indaga-demo-wrapper:hover .tooltip-flotante {
    opacity: 1;
    visibility: visible;
  }
</style>

<div class="indaga-demo-wrapper">
  <button class="btn-indaga-info">Pasa el cursor por aquí</button>
  <div class="tooltip-flotante">¡Tooltip posicionado de forma 100% nativa con CSS!</div>
</div>
```

![](https://indaga.net/wp-content/uploads/2026/10/developer-mozilla.jpg)