Q:

Positioning an image consistently above a character

I'm trying to position an image such that it is consistently above a specific letter no matter how a screen is resized.  As an example, how would one position the green dot in the below fiddle consistently above the dotless i. 
I've tried using absolute positioning with percentages but if I resize the screen then the image moves to the left/right of the dotless i.
HTML
<div id="pictureContainer">
  <img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png">
</div>
<div id="textContainer">
  <h1>H&inodot; World</h1>
</div>

CSS
#textContainer {
    text-align: center;
}

#greenDot {
    height: 10px;
    width: 10px;
}

JS FIDDLE https://jsfiddle.net/473hgg9o/1/

A:

Use relative and absolute positioning.  Here is an updated fiddle.  Change the top and left values as you see fit.  This keeps them in the same container so they move together. 
<div id="textContainer">
    <h1>
        H<span class="i-container">&inodot;<img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png"></span> 
        World
    </h1>
</div>

.i-container{
    position: relative;
}

.i-container img{
    position: absolute;
    top: 0;
    left: 0;
}

