Overlay static image on top of leaflet map

I want to overlay ruler image on top of the leaflet map as shown below image.
This ruler position should not change even user do any action (e.g.zoom or pan etc).
Can anyone tell me possible approach I could take to implement this?