Bueno pues resulta que tengo algo así:
Código HTML:
Ver original<div id="mini-map-pos" style="top: 50px; left: 10px; color: white; background: rgba(0, 0, 0, 0.8); font-size: 14px; font-weight: 800; position: fixed; padding: 0px 10px;"></div>
<div id="mini-map-wrapper" style="position: fixed; bottom: 10px; right: 10px; width: 150px; height: 150px; background: url(http://i.imgur.com/8J8LU9O.png);"> <div id="mini-map" style="width: 100%; height: 100%; position: relative;"> <div id="mini-map-token" style="position: absolute; width: 5%; height: 5%; background: rgb(255, 59, 7); top: 17.1125%; left: 56.708%;"></div>
pero resulta que el div mini-map-token no respeta la anchura y la altura del div padre. y siempre acaba viéndose donde no debe.
para que lo veáis mejor: https://jsfiddle.net/7xjmr17r/
Gracias por adelantado