悬停时的滑块不与文本重叠

Question

我确定这是一个简单的解决方法，但我是 HTML/CSS 的新手 - 我希望 div 中的一段文本滑过另一个 div，其中包含图片和文字。目前，滑块 div 并未覆盖整个 div，因为背景文本阻止了它这样做。我怎样才能让它完全重叠？

这是我的代码:

.items-tall {
 background-color: #F473FF;
 height: 450px;
 overflow: hidden;
}

.items-tall-slider {
 background-color: black;
 height: 450px;
 width: 100%; 
 margin-left: -100%;
 transition: 0.5s;
 color: white;
 font-size: 60px;
 text-align: center;
 line-height: 450px;
}

.items-tall:hover .items-tall-slider {
 margin-left: 0%;
 transition: 0.5s; 
}

<div class="row">

<div class="col-4 col-m-6 items-tall">  
This is my title.<br> I currently want all this text behind the slider. Hover over this. 
  
<div class="items-tall-slider"> Sliding info.  </div>

</div>

Answer 1

将此添加到您的 .items-tall-slider:

  position:absolute;
  top:0;

这用于定位：

.row {
  position:relative;
}

.items-tall {
 background-color: #F473FF;
 height: 450px;
 overflow: hidden;
}

.items-tall-slider {
 background-color: black;
 height: 450px;
 width: 100%; 
 margin-left: -100%;
 transition: 0.5s;
 color: white;
 font-size: 60px;
 text-align: center;
 line-height: 450px;
  position:absolute;
  top:0;
}

.items-tall:hover .items-tall-slider {
 margin-left: 0%;
 transition: 0.5s; 
}

.row {
  position:relative;
}

<div class="row">

  <div class="col-4 col-m-6 items-tall">  
    This is my title.<br> 
    I currently want all this text behind the slider. Hover over this. 

    <div class="items-tall-slider"> 
      Sliding info.  
    </div>
  </div>

</div>

您还遗漏了一个 </div> 结束标记。我在这个例子中添加了它。

Answer 2

在您的示例中，最简单的解决方案是将 position: absolute; top: 0 添加到 .items-tall-slider。但是，这有潜在的不良副作用，即滑块不再占用任何 space。因此，您页面中的任何其他元素也可能与您的滑块重叠。

如果您不想要这种副作用，您可以像这样（或在下面的示例中）为您的滑块添加一个负边距，然后与您的文本重叠：

.items-tall-slider {
  margin-top: -40px;
}

.items-tall-slider {
 margin-top: -40px;
}

.items-tall {
 background-color: #F473FF;
 height: 450px;
 overflow: hidden;
}

.items-tall-slider {
 background-color: black;
 height: 450px;
 width: 100%; 
 margin-left: -100%;
 transition: 0.5s;
 color: white;
 font-size: 60px;
 text-align: center;
 line-height: 450px;
}

.items-tall:hover .items-tall-slider {
 margin-left: 0%;
 transition: 0.5s; 
}

<div class="row">

<div class="col-4 col-m-6 items-tall">  
This is my title.<br> I currently want all this text behind the slider. Hover over this. 
  
<div class="items-tall-slider"> Sliding info.  </div>

</div>

悬停时的滑块不与文本重叠

Slider on hover not overlapping text

html

css

slider

hover