изменение размера изображения и изменение положения переменной гармонично

Question

Я новичок в html и CSS, я проектирую веб-страницу, для которой мне нужно загрузить переменную, которая может быть обновлена ​​по времени, и мне нужна эта переменная позиция над определенной частью изображения, которая является прямоугольником, и она является частью изображения.

Теперь я сделал это, но он работает только тогда, когда браузер становится полноразмерным, и когда я изменяю размер браузера, мое изображение начинает изменять размер, но переменная выходит из этой определенной области. Мне нужно изменение размера изображения и изменение положения переменной гармонично.

изображение выглядит примерно так: и мой код:

html, body {
    height: 100 % ;
    width: 100 % ;
    background - color: rgb(117, 177, 223);
}

.imgbox {
    display: grid;
    height: 100 % ;
}
.center - fit {
        max - width: 100 % ;
        max - height: 100 % ;
        marjin - left: auto;
        marjin - right: auto;
    }

    .pos1 {
        position: relative;
        height: 3 vh;
        width: 7 vw;
        background: transparent;
        top: 280 px;
        left: 160 px;
        marjin - left: auto;
        marjin - right: auto;
        text - align: center;
        line - height: 2 vw;
        font - size: 2 vw;
        boarder - radius: 0 %
            color: white;
        border: transparent;

    }

   

<div class="col-sm-12 col-md-12">
    <a href="#">
        <div class="pos1" id="Grid-variable">gggg</div>
        <div class="imgbox">
            <img class="center-fit" src='img/Eee.jpg'>
        </div>
    </a>
</div>