如何通过HTML和CSS防止窗口缩放时按钮移位？

不用写一堆media queries就能解决，你的核心问题是给#tvButtons用了固定像素的绝对定位（right:469px; top:235px），窗口缩放时这个固定值不会跟着电视图片的尺寸变化，自然就错位了。下面是简便的修复方案：

问题现象 #

• 全屏状态：按钮位于电视图片的正确位置
• 窗口缩小后：按钮偏离电视图片的对应位置

修复思路 #

1. 让电视图片自适应容器宽度，保证缩放时比例不变
2. 用相对百分比定位替代固定像素值，让按钮始终相对于电视图片的正确位置

修改后的代码 #

HTML（无需改动） #

<body>
<header>
    <h1>Nazareth</h1>
    <div class="headerButtons">
        <p>About me</p>
        <p>My Projects</p>
        <p>Contact Me</p>
    </div>
</header>

<div id="tv">
    <img src="stuff/pngwing.com.png" alt="电视图片">
    <div id="tvButtons">
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
    </div>
</div>
</body>

CSS（关键修改标记在注释中） #

body{
    margin: 0;
    padding: 0;
    background-color: var(--white-color);
}
/*=============NAVBAR=====================*/
header > h1 {
    padding: 0;
    margin: 0 0 0 2rem;
    color: var(--blue-color);
    font-size: 3rem;
}
header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--brown-color);
    font-family: 'Yanone Kaffeesatz', sans-serif;
    letter-spacing: 0.1rem;
}
.headerButtons {
    display: flex;
    margin-right: 2rem;
}
header p {
    margin-right: 2rem;
    font-size: 1.5rem;
    background-color: var(--white-color);
    padding: 0.5rem;
    border: 2px solid #847728;
}
header p:hover {
    background-color: var(--orange-color);
    border: none;
    border-radius: 5px;
}
/*=================END OF NAVBAR=====================*/

#tv {
    display: flex;
    position: relative;
    justify-content: center;
    margin-top: 1rem;
    width: 100%;
    /* 新增：限制容器最大宽度，避免图片过度放大 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
#tv img {
    /* 新增：让图片自适应容器，保持原始比例 */
    width: 100%;
    height: auto;
}
#tvButtons {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* 修改：用百分比替代固定像素，基于父容器尺寸定位 */
    right: 18%;
    top: 35%;
    /* 可选：微调垂直位置，抵消按钮自身高度的影响 */
    transform: translateY(-10%);
}
#tvButtons button{
    margin-top: 15px;
    background-color: var(--white-color);
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

#tvButtons button:active{
    background-color: #ffe95b;
}

核心修改说明 #

• #tv img的width:100%; height:auto;：让电视图片跟着容器宽度自动缩放，同时保持比例，确保父容器#tv的尺寸始终和图片匹配
• #tvButtons的right/top改用百分比：比如right:18%表示距离电视图片右侧18%的位置，窗口缩放时百分比会随容器尺寸自动调整，按钮位置始终对应电视图片的固定区域
• 可选的transform: translateY(-10%)：用来微调按钮的垂直对齐，避免因按钮自身高度导致的位置偏移

这样不管窗口怎么缩放，按钮都会牢牢固定在电视图片的对应位置，完全不需要编写media queries。

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