Question

我的英雄部分中有一个带有3张幻灯片的滑块，我想创建一个div，其内容已放置并显示在3张幻灯片上，并且无论我在哪张幻灯片上都始终显示。

Answer 1

您要创建一个位于滑块顶部的绝对定位的元素。

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

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

Answer 2

<style>
  .slider-wrapper {
    position: relative;
  }
  .slider-wrapper .slider-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(134, 134, 134, 0.2);
  }
</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">`enter code here`
    This content will be displayed over the slider
  </div>
</div>

Answer 3

CSS代码：

#hero {
  position: relative;
}
#topdiv,
#sliders {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

HTML代码：

<div id="hero">
  <div id="topdiv">Div content</div>
  <div id="sliders">
    <div>Slider1 Content</div>
    <div>Slider2 Content</div>
    <div>Slider3 Content</div>
  </div>
</div>

如何创建带有覆盖滑块的内容的div？

3 个答案: