始终将下一个和上一个置于顶部

Question

Whosebug 我试图将“下一个”和“上一个”箭头始终定位在侧边栏（侧边栏 header）的顶部，但是无法弄清楚如何在桌面上获得相同的位置和移动设备？

现有代码：

.prev,
.next {
  cursor: pointer;
  position: absolute;
  padding: 16px;
}

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

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

.sidebar {
  display: inherit;
  grid-gap: inherit;
}

@media (min-width: 67.5em) and (max-width: 40em) {
  .sidebar {
    grid-template-columns: 1fr 1fr;
    0
  }
}

@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;
  }
}

<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>

Answer 1

您必须为两个按钮定义 top，例如 50%:

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;         /* this makes the difference */
  ...

工作示例：（我为演示添加了另一种颜色的按钮）

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;         /* this makes the difference */
  padding: 16px;
  color: gray;      /* just for demonstration */
}

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

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

.sidebar {
  display: inherit;
  grid-gap: inherit;
}

@media (min-width: 67.5em) and (max-width: 40em) {
  .sidebar {
    grid-template-columns: 1fr 1fr;
    0
  }
}

@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;
  }
}

<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>

始终将下一个和上一个置于顶部

Always position next & prev top

html

css

position