¿Alguna vez has intentado crear un menú desplegable para tu botón, seleccionarlo pero luego te bloqueó el desbordamiento oculto?

Entonces, ¿qué haces? Bueno, entonces buscas JavaScript para lanzar el elemento a la raíz del DOM y luego posicionas el elemento en función de los elementos desencadenantes, recalculando cada vez que cambia el diseño, se desplaza y cambia el tamaño de la ventana, no muy eficaz.

Quiero comenzar diciendo que aún no tiene soporte completo, pero hay un polyfill para resolver eso por ahora.

Las dos características principales en las que confiaremos son

posicionamiento-anclaje

popovers

Entonces mi idea inicial surgió cuando vi que el cuadro de diálogo se enviaba a la raíz pero con la capa DOM. Me topé con la API de popover donde básicamente obtienes la misma lógica pero actúa ligeramente diferente.

También recuerdo haber visto una publicación sobre cómo anclar un elemento a un pulgar en un control deslizante de rango.

Luego pensé básicamente en lo que quieres hacer con cualquier menú desplegable/información sobre herramientas, etc. que necesite romper el desbordamiento oculto. Si mezclas los dos, no necesitarás todo el javascript excesivo.

Aquí hay una demostración funcional en los navegadores que lo admiten

• Chrome, borde v125
• Ópera v111
• Chrome para Andriod, navegador Andriod v129

Está bien, ¿y qué si quieres usarlo hoy? Bueno, hay un polyfill para eso que podemos usar.

El polirelleno de posicionamiento de anclaje oddbird/css

Que tiene una excelente compatibilidad con el navegador

• Firefox 54
• Cromo 51
• Borde 79
• Safari 10

Intenta visitar un navegador que no se menciona en el ejemplo que no es de Polyfill y el siguiente ejemplo funciona. He probado personalmente las últimas versiones de Safari y Firefox

Esto significa que sí, en la mayoría de los navegadores tendremos la sobrecarga calculada adicional, pero es fácil de usar y desactivar cuando tengamos suficiente compatibilidad.

Hay una desventaja en este enfoque y es que el tamaño del polyfill es de ~92kb, por lo que tendrá un impacto en la carga, pero podrías cargarlo de forma diferida después de que la aplicación/sitio web haya terminado de hacer algo importante