如何使用TailwindCSS与JS实现玻璃杯在岩石上的全断点响应式定位

需求说明 #

使用自定义JavaScript与TailwindCSS实现玻璃杯元素的全响应式适配，要求在所有响应式断点下，玻璃杯都能精准放置在页面背景的岩石上方，预期效果如下：

原有问题代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

    <body>       
        <div>
            <div class="text-center relative">
                <div class="mx-auto w-48 h-auto mb-2 relative mb-4 shadow-inset ">
                    <img src="https://i.ibb.co/qjqqmQ0/glass-7-web-removebg-preview-2.png" class="glass_icon object-cover w-full h-96" alt="">
                </div>
            </div>
        </div>
    </body>
    <script>
        const body = document.querySelector("body");
        body.style.background = `url('https://harvest-selection.netlify.app/assets/background/In-Woods.gif') no-repeat fixed 50% 100%`;

        body.style.cssText += `background-size: cover;height:100vh`;
    </script>
</html>

问题原因与修复逻辑 #

原有代码采用普通文档流+固定宽高放置玻璃杯，背景图随视口尺寸缩放时，岩石位置会按比例偏移，固定边距无法覆盖所有响应式断点：

• 玻璃杯改用底部锚定的绝对定位：背景图本身对齐视口底部，岩石始终处于背景底部区域，锚定底部的偏移量稳定性远高于锚定顶部
• 用视口高度单位vh设置底部偏移值，搭配Tailwind响应式断点，针对不同屏幕尺寸微调偏移量和玻璃杯宽度，匹配背景的缩放比例
• 移除玻璃杯写死的固定高度，让高度随宽度等比自适应，避免图片拉伸变形

修正后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen overflow-hidden relative m-0 p-0">       
    <!-- 玻璃杯定位容器 -->
    <div class="absolute left-1/2 -translate-x-1/2 bottom-[12vh] sm:bottom-[14vh] md:bottom-[16vh] lg:bottom-[18vh] xl:bottom-[20vh] w-28 sm:w-36 md:w-44 lg:w-52 xl:w-60">
        <img src="https://i.ibb.co/qjqqmQ0/glass-7-web-removebg-preview-2.png" class="w-full h-auto object-contain" alt="玻璃杯">
    </div>
</body>
<script>
    const body = document.querySelector("body");
    body.style.background = `url('https://harvest-selection.netlify.app/assets/background/In-Woods.gif') no-repeat center bottom`;
    body.style.backgroundSize = "cover";
</script>
</html>

如果个别断点下位置有细微偏差，直接调整对应断点的bottom-[xxvh]数值即可，偏移值随视口高度等比变化，适配所有常规屏幕尺寸。

内容的提问来源于stack exchange，提问作者Saad Masood