将元素向上移动一点答案

【问题标题】：Move element up a bit将元素向上移动一点
【发布时间】：2019-04-03 04:57:35
【问题描述】：

我需要像这张图片一样定位数字“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”坐标，然后减去一些值，然后定位它。 不确定如何获取坐标。

【问题讨论】：

你能放一些假图片吗

标签： css vue.js sass

【解决方案1】：

只需将您想要向上移动的元素设置为relative 的位置，然后将top 减去您想要的数量

例如

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

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

【讨论】：