html - 位置相对靠后的两个 div(重叠)

Question

tl;dr:position: relative 的第一个 div 位于 position: relative 的第二个 div 之上。它们必须重叠。

我在 Bootstrap 中有一个旋转木马。我想将 slider 效果(从右到左)更改为平滑过渡不透明度 0-1(当第一个 div 消失时，另一个显示在同一位置)。

因此，要做到这一点，每个 div 必须具有相同的 width/height/top/left 参数。.active 项必须相同，例如 .active .left 和 .next .left。我的第一个想法是创建这样的东西:

.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right

并给出完全相同的参数 + position: relative。

问题来了。 position: relative 的第一个 div 位于 position: relative 的第二个 div 之上。这使得平滑过渡的效果不起作用。

Answer 1

如果你希望它是动态的而不是在高度/边距中手动编程，给第一个div position: absolute。这将导致其他元素忽略它，第二个 div 将位于它的正上方。

https://jsfiddle.net/dk9gwnkj/2/