如何在div内放置固定位置文本并调整其垂直显示位置

你需要修改CSS样式来控制文本块的定位，具体操作如下：

• 首先给包裹图片和文本的<figure>标签设置相对定位，作为文本定位的父级参照
• 给用来放文本的.centrado2类设置绝对定位，调整top属性的值就可以控制文本向下偏移的距离，数值越大文本位置越靠下
• 如果你要调整的是图片下方的价格文本位置，直接给价格所在的#adiciona45_mostrar元素加margin-top属性即可，数值越大位置越靠下

代码修改示例 #

1. HTML部分调整 #

<figure style="position: relative;margin: 0;padding: 0;">
    <img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
        style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
    <div class="centrado2" name="disponible_helado" id="agotado_45">
        <!-- 这里放你要显示的文本，比如“售罄” -->
        AGOTADO
    </div>
</figure>

2. 新增/修改.centrado2的CSS样式 #

你可以把这段样式加在你的样式文件里，或者直接写在页面的style标签中：

.centrado2 {
    /* 绝对定位，相对于父级figure */
    position: absolute;
    /* 水平居中设置 */
    left: 50%;
    transform: translateX(-50%);
    /* 调整top值控制向下偏移的距离，可根据需求修改数值，单位也可以用% */
    top: 60px;
    /* 以下是文本显示样式，可按需调整 */
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(0,0,0,0.7);
    padding: 4px 12px;
    border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者Oscar Vardela