html - 如何创建一个包含覆盖我的 slider 的内容的 div？

Question

我的主要部分中有一个包含 3 张幻灯片的 slider ，我想创建一个 div，其中包含放置和显示在 3 张幻灯片上的内容，并且无论我在哪张幻灯片上都始终显示。

Answer 1

您想创建一个位于 slider 顶部的绝对定位元素。

这可以通过在 slider 周围放置一个包装器元素，然后在 slider 旁边的包装器内添加绝对放置的元素来实现。

<style>
  .slider-wrapper {
    /* required so the absolutely positioned overlay is placed relative to this wrapper */
    position: relative; 
  }

  .slider-overlay {
    position: absolute;
    /* center this overlay over the slider */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="slider-wrapper">
  <div class="slider">
    <div class="slide">Slide Content</div>
    <div class="slide">Slide Content</div>
    <div class="slide">Slide Content</div>
  </div>
  <div class="slider-overlay">
    This content will be displayed over the slider
  </div>
</div>