Convert Sugarcube variable to html variable?

First, I am absolutely new to Twine, HTML and CSS so I am not sure if I am even asking the right question I am using Twine 2.1.1 and Sugarcube v2.14.0.

I have this code in my Story Stylesheet.

.div2 {
    position: absolute;
    top: 45px;
    left: 100px;
    width: 823px;
    height: 585px;    
    padding: 1px;
    border: 4px  solid peru;
    box-sizing: border-box;
    background-image: url("snowstorm.png");
    Background-color: green;
}

This makes a box with a background image at a fixed point on the passage screen. This seems to be working wonderfully.

I have the following code in a passage.

<div class="div2">

<div style="position:relative; height:25px;">
<img src="picture2.png" width="25" height="25"
style="position:absolute; top:200px; left:200px; width:25px; height:25px; border:none;"
/>
</div>

This works well too and places a small picture on top of the backround image that was set in the stylesheet.

My question is as follows, I can change the position:absolute values for top and left manually in the code and move the small picture created in the passage any place over the background image. I am trying to figure out how to use variables in the place of the manually entered numbers for top and left. I need to take <<set $value = some number>> and use that value as the top or left numbers. Nothing I have tried works.

To better understand I am using the background image set in the stylesheet as a map. I want to use the small image set in the passage as an icon the moves across the map based on the players location. Everything would work well if I could set the position:absolute numbers from the passage variables.

Any help would be greatly appreciated