CSS固定定位按钮无法右移问题求助（附代码）

问题核心：你的CSS样式是给.controls容器设置的，但HTML里.controls是个空div，所有按钮（.control元素）都在它外面，样式根本没作用到按钮上；另外top:50%仅会让容器顶部对齐视口中间，需要额外偏移才能实现垂直居中。

1. 修正HTML结构 #

把所有.control按钮嵌套进.controls容器里：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="controls">
  <div class="control control-1 active-btn">
    <i class="fas fa-home"></i>
  </div>
  <div class="control control-2" data-id="about">
    <i class="fas fa-user"></i>
  </div>
  <div class="control control-3" data-id="portfolio">
    <i class="fas fa-briefcase"></i>
  </div>
  <div class="control control-4" data-id="blogs">
    <i class="fas fa-newspaper"></i>
  </div>
  <div class="control control-5" data-id="contact">
    <i class="fas fa-envelope"></i>
  </div>
</div>

2. 完善CSS样式 #

添加垂直居中偏移，同时给按钮加基础显示样式：

.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 150px;
  /* 让容器自身垂直居中 */
  transform: translateY(-50%);
  /* 按钮垂直排列并设置间距 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control {
  /* 基础按钮样式，确保可见 */
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.control.active-btn {
  /* 高亮激活状态 */
  background: #2c3e50;
  color: #fff;
}

修改后按钮容器会固定在右侧150px位置并垂直居中，按钮也能正常显示对齐。

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