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

＆＃13;

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

＆＃13;

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

＆＃13;

您还错过了一个</div>结束标记。我在这个例子中补充说。

Answer 2

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

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

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

悬停滑块不重叠文本

2 个答案: