调整浏览器窗口大小时div发生偏移，如何固定其位置不移动

问题根因 #

你当前的代码存在两个核心问题导致窗口缩放时div位置偏移：

• 设置了margin-left: auto，默认块级元素右margin为0时，该属性会让div靠向父容器右侧，父容器宽度随窗口变化时，div水平位置自然随之变动
• width: 250px + padding-left: 290px的组合会让盒子总宽度达到540px（默认box-sizing: content-box的情况下），大概率不符合你的预期，如非必要可以删除该padding属性。

解决方案 #

根据你实际的布局需求选择对应方案即可：

方案1：div始终水平居中，窗口缩放保持居中

修改CSS如下：

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    /* 移除冗余的padding-left: 290px，确实需要内边距请调整数值不超过宽度 */
    margin: 30px auto 0;
}

方案2：div固定在视口指定位置，窗口滚动、缩放都不移动

使用position: fixed实现：

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    position: fixed;
    /* 按需调整位置数值，需要固定在右侧就把left换成right */
    left: 100px;
    top: 30px;
}

方案3：div相对父容器固定位置，不随窗口缩放偏移

先给父容器添加定位属性，再设置div绝对定位：

/* 父容器样式 */
.parent {
    position: relative;
    width: 1200px; /* 也可设置max-width配合margin: 0 auto实现父容器居中 */
}

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    position: absolute;
    /* 相对父容器的位置，按需调整 */
    left: 50px;
    top: 30px;
}

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