移动端返回顶部按钮设置左侧定位后尺寸变大问题求助

问题描述 #

桌面端返回顶部按钮表现正常，但在移动端遇到两个问题：

• 设置按钮距离左侧20px后，按钮水平宽度变为原来的三倍
• 尝试设置right: 1000px强制左移，按钮最多只能左移到约700px位置，无法达到预期

桌面端CSS代码：

#myScrollBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 240px; /* Place the button 240px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #ffa500; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myScrollBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

移动端CSS代码：

@media (max-width: 800px) {
    { #myScrollBtn { left: 20px; }
}

原因分析 #

1. CSS语法错误：移动端媒体查询代码里多了一个多余的{，导致这段样式无法正确解析生效，这也是设置right: 1000px没用的主要原因。
2. 定位属性冲突导致宽度拉伸：就算修复语法，桌面端的right:240px和移动端的left:20px会同时作用于fixed定位的按钮。对于fixed/absolute定位的元素，同时设置left和right时，浏览器会自动拉伸元素宽度，使其填满从left到right的水平空间，这就是按钮变宽的核心原因。

解决方案 #

修复语法错误，并在移动端样式中重置right属性为auto，消除定位冲突：

@media (max-width: 800px) {
    #myScrollBtn { 
        left: 20px; 
        right: auto; /* 重置right属性，避免宽度被强制拉伸 */
    }
}

修改后，按钮会准确定位在左侧20px位置，同时保持原有宽度不变。

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