网站主题切换按钮点击后移位问题的修复方法咨询

问题根源 #

你的主题切换按钮默认就被设置为居中显示，原因是.toggleWrapper的CSS使用了绝对定位+居中偏移的组合：

.toggleWrapper {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
}

这种写法会让元素相对于父容器（此处为body）居中，而非固定在你预期的位置。点击时的“移动到中间”效果，本质是按钮原本就处于居中状态，切换主题时的视觉变化放大了这个布局问题。

解决方案 #

修改.toggleWrapper的CSS，将其设置为固定定位并指定目标位置（比如右上角），同时移除居中相关样式：

.toggleWrapper {
     position: fixed; /* 固定在视口，不随页面滚动移动 */
     top: 20px; /* 距离顶部的距离 */
     right: 20px; /* 距离右侧的距离 */
     overflow: hidden;
     padding: 0; /* 移除多余的左右内边距 */
}

完整修改后的核心CSS片段 #

保留原有按钮样式，仅调整定位部分：

body.dark-theme {
filter: brightness(0.6);
}
.toggleWrapper {
     position: fixed;
     top: 20px;
     right: 20px;
     overflow: hidden;
     padding: 0;
}
/* 以下原有样式保持不变 */
.toggleWrapper input {
     position: absolute;
     left: -99em;
}
/* ...其余按钮样式代码... */

自定义说明 #

• 可根据需求调整top和right的值，比如改为top:15px; left:15px将按钮放在左上角。
• position: fixed确保按钮始终固定在视口的指定位置，不会受页面其他元素布局影响。

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