diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 01cc595a6..cb99a37b9 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -70,11 +70,10 @@
       translateItem(index, activeIndex) {
         const parentWidth = this.$parent.$el.offsetWidth;
         const length = this.$parent.items.length;
-
+        if (index !== activeIndex && length > 2) {
+          index = this.processIndex(index, activeIndex, length);
+        }
         if (this.$parent.type === 'card') {
-          if (index !== activeIndex && length > 2) {
-            index = this.processIndex(index, activeIndex, length);
-          }
           this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
           this.active = index === activeIndex;
           this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
diff --git a/packages/theme-default/src/carousel-item.css b/packages/theme-default/src/carousel-item.css
index 8991757b9..2bf1e2307 100644
--- a/packages/theme-default/src/carousel-item.css
+++ b/packages/theme-default/src/carousel-item.css
@@ -13,10 +13,13 @@
       display: inline-block;
       transition: .4s ease-in-out;
       overflow: hidden;
+      z-index: calc(var(--index-normal) - 1);
+      @when active {
+        z-index: calc(var(--index-normal) + 1);
+      }
 
       @modifier card {
         width: 50%;
-        z-index: calc(var(--index-normal) - 1);
         &.is-in-stage {
           cursor: pointer;
           z-index: var(--index-normal);
diff --git a/packages/theme-default/src/carousel.css b/packages/theme-default/src/carousel.css
index 467b09e24..52edb2cad 100644
--- a/packages/theme-default/src/carousel.css
+++ b/packages/theme-default/src/carousel.css
@@ -55,6 +55,7 @@
       transform: translateX(-50%);
       margin: 0;
       padding: 0;
+      z-index: calc(var(--index-normal) + 1);
 
       @modifier outside {
         bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);