向上移动元素

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 {

}

目标正在将数字+分页在不同的设备尺寸上向上移动 。

我正在考虑获取“ product-images-popup-bar”坐标，然后减去一些值，然后进行定位。 虽然不确定如何获取坐标。

Answer 1

只需将要移动的元素稍微移至relative的位置，然后再将top减去所需的数量

例如

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

然后显然使用媒体查询来随意调整