CSS superior relativo a la pantalla

Tengo un problema donde tengo múltiples elementos que coinciden con la posición de la imagen de fondo. Cuando se cambia el tamaño de la ventana (especialmente si es muy pequeña), los valores “superiores” de los elementos no permanecen constantes. Este pequeño problema se desarrolla y 10 elementos más tarde todo está totalmente mal. Juegue con el tamaño de la ventana (intente hacerlo muy pequeño) para ver fácilmente el problema.

¿Cómo puedo solucionar este problema y mantenerlos haciendo coincidir el fondo todo el tiempo?

    html, body { margin: 0; } div { min-width: 100%; min-height: 100%; background-image: url("http://sofes.miximages.com/html/EX2L8y6.jpg"); background-size: 100%, 100%; background-repeat: no-repeat; position: absolute; } .TheBtn { position: relative; background-color: red; opacity: 0.5; height: 4.4vw; width: 22.2vw; left: 19vw; top: 10.8vw; }    

Cuando establece un elemento como relativo, significa que todos los elementos secundarios están relacionados con ese elemento primario. .TheBtn está configurado como relativo, pero no tiene elementos secundarios. Necesita establecer el div en relativo como .TheBtn es un elemento secundario de div, y el posicionamiento de .TheBtn será absoluto en relación con el elemento primario más cercano que sea relativo (el div). Aquí está el código que usé para probar:

 html,body { margin: 0; } div { min-width: 100%; min-height: 100vh; background-image: url("http://sofes.miximages.com/html/EX2L8y6.jpg"); background-size: 100%, 100%; background-repeat: no-repeat; position: relative; } .TheBtn { position: absolute; background-color: red; opacity: 0.5; height: 4.4vw; width: 22.2vw; left: 19vw; top: 10.8vw; }