zwei div mit Position relativ hinter (überlappend)

Question

tl; dr: Erste div mit position: relative ist über zweiten div mit position: relative. Sie müssen sich überschneiden.

Ich habe ein Karussell im Bootstrap. Ich möchte den Schieberegler-Effekt (von rechts nach links) ändern, um die Übergangs-Opazität 0-1 zu glätten (wenn das erste Div verschwindet, wird das andere an der gleichen Stelle angezeigt).

Um dies zu tun, müssen alle Divs die gleichen haben width/height/top/left parametr. .active Artikel muss identisch sein wie .active .left und .next .left. Meine erste Idee war, etw wie diese erstellen:

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

und geben exacly die gleichen parametrs + position: relative.

Hier ist das Problem. Erstes div mit position: relative ist über zweitem div mit position: relative. Dies bewirkt, dass der Effekt ein fließender Übergang nicht funktioniert.

Answer 1

Problem gelöst:

margin-top in zweiter div genau die gleiche wie Höhe der ersten div (zB margin-top: -50%) sein muss

Answer 2

Wenn Sie es wollen, stattdessen dynamisch seine manuell programmieren Geben Sie in der Höhe/Rand das erste Div position: absolute. Das wird dazu führen, dass die anderen Elemente es ignorieren und der zweite div wird direkt darüber sein.

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