如何防止HTML元素随浏览器窗口缩放移动？固定元素位置方案

我是前端开发初学者，正在制作一个简单响应式页面。页面内的烛台图片具备尺寸响应性，可随浏览器窗口缩放调整大小，但窗口缩小时，图片位置会偏离全屏状态下的固定位置。我已尝试absolute、relative、fixed、sticky等定位属性，均未解决问题。

原代码 #

<!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">
    <title>form</title>
    <style>
        body{margin: 0px;}
        #main{
            background-color: hsl(308, 62%, 39%);
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        #blendaText{
            color: white;
            position: absolute;
            font-size: 3.5vw;
            top:50px;
            left: 25px;
        }

        #form-container{
            background-color: white;
            height: 100vh;
            width: 70vw;
            float: right;
            border-radius: 20px 0px 0px 20px;
        }
        #candleImage{
            position: relative;
            top:200px;
            left: 200px;
            width:30%;
            height: auto;
        }
        #form{
            margin-left: 100px;
            margin-top: 100px;
        }
        input{width: 90%;}
        input[type="submit"]{margin-left: 5px;}
    </style>
</head>
<body>
        <div id="main">
            <p id="blendaText"> Blenda allows <br> you to imagine 3D </p>
            <img id="candleImage" src="candle.png" alt="candle holder">
            <div id="form-container">
                <form id="form">
                    <label for="fname">First name:</label><br>
                    <input type="text" id="fname" name="fname" value=""><br>
                    <label for="lname">Last name:</label><br>
                    <input type="text" id="lname" name="lname" value=""><br><br>
                    <input type="submit" value="Submit">
                  </form> 
            </div>
        </div>
</body>
</html>

问题分析 #

原代码存在两个核心问题：

1. 烛台图片使用固定像素值的top和left定位，窗口缩小时固定像素偏移无法自适应页面比例，导致位置偏移
2. 右侧表单容器使用float:right，会干扰父容器内其他元素的文档流布局，进一步影响图片的位置计算

解决方案代码 #

<!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">
    <title>form</title>
    <style>
        body{margin: 0px;}
        #main{
            background-color: hsl(308, 62%, 39%);
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden; /* 防止窗口过小时图片溢出 */
        }
        #blendaText{
            color: white;
            position: absolute;
            font-size: 3.5vw;
            top: 3%; /* 改用百分比替代固定像素，自适应页面 */
            left: 2%;
        }

        #form-container{
            background-color: white;
            height: 100vh;
            width: 70vw;
            position: absolute; /* 替换float为绝对定位，避免干扰文档流 */
            right: 0;
            border-radius: 20px 0px 0px 20px;
        }
        #candleImage{
            position: absolute; /* 基于父容器绝对定位，确保位置计算准确 */
            top: 35%; /* 用百分比控制垂直位置，保持比例 */
            left: 10%; /* 用百分比控制水平位置，保持比例 */
            width: 25%; /* 调整为合适的百分比宽度，保证响应性 */
            height: auto;
        }
        #form{
            margin-left: 8%; /* 表单边距改用百分比，提升响应性 */
            margin-top: 10%;
        }
        input{width: 90%;}
        input[type="submit"]{margin-left: 5px;}

        /* 小屏幕适配优化 */
        @media (max-width: 768px) {
            #form-container{
                width: 100vw;
                border-radius: 0;
                height: auto;
                min-height: 50vh;
                top: 50vh;
            }
            #candleImage{
                width: 40%;
                top: 20%;
                left: 30%;
            }
            #blendaText{
                text-align: center;
                left: 0;
                width: 100%;
                top: 5%;
            }
        }
    </style>
</head>
<body>
        <div id="main">
            <p id="blendaText"> Blenda allows <br> you to imagine 3D </p>
            <img id="candleImage" src="candle.png" alt="candle holder">
            <div id="form-container">
                <form id="form">
                    <label for="fname">First name:</label><br>
                    <input type="text" id="fname" name="fname" value=""><br>
                    <label for="lname">Last name:</label><br>
                    <input type="text" id="lname" name="lname" value=""><br><br>
                    <input type="submit" value="Submit">
                  </form> 
            </div>
        </div>
</body>
</html>

关键修改说明 #

• 图片定位：将图片改为position:absolute，通过百分比值的top和left定位，确保窗口缩放时始终保持与父容器的相对位置比例
• 表单容器：替换float:right为position:absolute; right:0，消除float对文档流的干扰，保证父容器内绝对定位元素的位置计算准确
• 边距适配：文本和表单的边距改用百分比，提升整体页面的响应一致性
• 小屏幕优化：添加媒体查询，针对768px以下的小屏幕调整布局，确保移动端的显示效果

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