Estoy tratando de superponer un código HTML sobre la imagen de un sitio web usando <iframe> y CSS.

El sitio web es un sitio web de monitoreo del clima (que hemos comprado por cierto), que quiero superponer con mi propio código HTML e imagen.

¿Es posible "enganchar" en una parte de la imagen con mi propia imagen? Lo quiero enganchado (por así decirlo, perdón por mi jerga), para que el cambio de tamaño del navegador no cambie su diseño y para que también funcione en navegadores de dispositivos móviles.

Este es el sitio web al que me refiero (lo siento, no es un sitio accesible al público).

Me las arreglé para lograr algo de lo que quiero usando este código ...

 <style> iframe { position: absolute; border: none; box-sizing: border-box; width: 100%; height: 100%; } </style> <div style="z-index:99;position:absolute;top:115px;right:352px"> <canvas id="compass" height="230" width="230"></canvas> <asp:Label ID="lblDegrees" runat="server"></asp:Label> </div> <iframe id="iframe1" src="https://asdjkhsdfjkhsdfjkh"> <-- internal website for above image </iframe>

Pero como ha adivinado, el posicionamiento top y right está codificado para superponer ese cuadro en el lugar correcto.

Sin embargo, tan pronto como cambio el tamaño del navegador o lo veo en un dispositivo móvil, el elemento <canvas> se desplaza hacia la derecha (o hacia la izquierda o hacia abajo) y el dial de la brújula subyacente se muestra desde atrás (algo parcialmente oscurecido).

es decir

Debe haber una mejor manera de hacer esto. ¿Alguna idea y sugerencia?

Gracias