如何让prev、next箭头始终位于sidebar顶部且桌面移动端位置一致

解决方案 #

核心问题 #

你当前箭头位置不统一的核心原因是：绝对定位的箭头没有绑定到侧边栏作为定位父容器，也没有固定垂直方向的位置，导致不同屏幕尺寸下箭头参照的定位基准不一致。

具体修改点 #

1. 给.sidebar添加position: relative属性，将其设为箭头的定位参照容器
2. 给.prev、.next统一添加top属性，固定其在侧边栏的垂直位置
3. 修复原代码中逻辑冲突的无效媒体查询（原规则同时要求最小宽度67.5em和最大宽度40em，永远不会触发）

修改后完整代码 #

CSS代码

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 16px; /* 可自行调整距离侧边栏顶部的高度 */
  padding: 16px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

.sidebar {
  position: relative; /* 新增，作为箭头的定位父容器 */
  display: inherit;
  grid-gap: inherit;
}

/* 修复原逻辑冲突的媒体查询，可根据你的实际需求调整断点 */
@media (max-width: 67.5em) {
  .sidebar {
    grid-template-columns: 1fr 1fr;
  }
}

@media all and (min-width: 1353px) {
  .Gridcontainer {
    grid-template-columns: 2fr 1fr;
  }
}

@media all and (min-width: 1352px) {
  .sidebar {
    grid-auto-rows: 100%;
    grid-row: span 1;
  }
}

HTML代码和原结构一致，无需修改

<div class="Gridcontainer">
  <div class="Intro">
    <video autoplay="" class="Videohack" loop="">
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </video>
  </div>
  <div class="sidebar">
    <a class="prev" onclick="plusSlides(-1)">❮</a> 
    <a class="next" onclick="plusSlides(1)">❯</a>
    <!-- 侧边栏其他内容 -->
  </div>
</div>

效果说明 #

修改后所有设备下，prev箭头会固定在侧边栏头部左侧，next箭头固定在侧边栏头部右侧，位置完全统一。如果需要调整箭头距离侧边栏顶部的高度，只需要修改.prev, .next的top属性数值即可。

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