Переместить элемент немного вверх

Question

Мне нужно позиционировать число "01/04", как на этом изображении

Пока я получил это

Структура кода такая же, как в vue js, пока:

<img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
    <div class="product-images-popup-number">
        <span class="product-images-popup-child_num">0{{current+1}}</span>
        <span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
    </div>
    <div class="product-images-popup-pagination">pagination</div>
</div>

css:

.product-images-popup-bar {
    position: absolute;
    left: 5vw;
}

.product-images-popup-number {
    display: flex;
    align-items: flex-start;
}

.product-images-popup-child_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 30px;
    font-size: 7vw;
}

.product-images-popup-parent_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 15px;
    font-size: 4vw;
    padding: 1px 0 0 4px;
}

.product-images-popup-parent_num:before {
    content: '/';
    padding-right: 5px;
}

.product-images-popup-pagination {

}

The цель - это перемещение чисел + нумерация страниц вверх на в устройстве другого размера.

Я думаю получить координату «product-images-popup-bar», затем вычесть некоторые значения, затем расположить их. Не знаю, как получить координату.

Answer 1

Просто дайте элементам, которые вы хотите сдвинуть немного вверх, позицию relative, а затем top минус желаемую сумму

например

.product-images-popup-number {
    display: flex;
    align-items: flex-start;
    position: relative;
    top: -5px;
} 

, а затем, очевидно, используйте медиа-запросы, чтобы настроить его, как вам нужно