jquery - 多个 div 占用相同的容器大小

Question

我正在构建一个基本的幻灯片系统。它的工作方式是有一个包含多张幻灯片的容器:

<div class="container">
   <div class="slide active"></div>
   <div class="slide"></div>
</div>

只有一张幻灯片处于事件状态。

现在我尝试引入淡入效果。为此，将在短时间内同时显示 2 张幻灯片。

我正在为这个 jQuery 的动画函数制作动画。

在此之前，每个 .slide 很容易占据其父级的 100% 宽度和高度，但是当我堆叠多个 .slide 时，这不再有效 具有不同的 z 索引。

我想过只使用 display: absolute，但我无法让每个 .slide 完全占据 .container 的大小>.

测试 CSS:

.container {
   width: 400px;
   height: 300px;
}

.slide {
   opacity: 50%;

}

我的问题:

如何在不指定绝对值的情况下让两个 .slide 元素占用完全相同的空间(其父元素的宽度和高度的 100%)。

Answer 1

当你同时使用位置relative和absolute时，你可以使用这个技巧。

.container {
  width: 200px;
  height: 100px;
  position: relative;
}
.slide {
  background: gold;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.active {
  background: aqua;
  z-index: 1; /*this slide should on top of the other one*/
}

<div class="container">
   <div class="slide active"></div>
   <div class="slide"></div>
</div>