使元素显示在轮播上方

Question

我有一个旋转木马，使用 owlCarousel，我正在尝试使旋转木马中的元素在悬停时展开。它的实现方式，默认情况下只是 displayed: none，然后在悬停时显示为阻止。没什么好看的。

它通过绝对定位脱离了流，这样旋转木马就不会在元素悬停时展开。

问题是，当元素悬停时，细节、展开的元素不显示。我试着给它一个高z-index，但它似乎并没有解决问题。这是代码：

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 300px;
  position: absolute;
  top: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  z-index: 20;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Answer 1

您可以尝试不给 top 值，而是给 auto 的高度 .details

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
    background-color: pink;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    height: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Answer 2

看看这是否适合你：

设置.owl-carousel .item为你的content height + detail height（我用的是200px）
将.owl-carousel.owl-theme .owl-nav的margin-top设置为-(detail height) + 10px（原来是10px）

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item {
  height: 200px;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 100px;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
}

.owl-carousel.owl-theme .owl-nav {
  margin-top: -90px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

使元素显示在轮播上方

Make elements show above carousel

html

javascript

jquery

owl-carousel

owl-carousel-2