html - 轮播元素中的绝对元素位于下一个元素之下

Question

在 owl carousel 中，我的绝对元素(放置在 carousel item 中)有一个问题，它带有类“disciription”，它在下一个元素后面，几乎找不到自己提出它的方法，所以希望你能帮助我。

一张我想要的照片:

<div class="owl-carousel topfeatured">
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description">
    </div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>

.topfeatured {
    overflow: hidden;
    height: 400px;
}
.topfeatured .item {
    position: relative;
    height: 400px;
}
.topfeatured .item .thumb {
    position: relative;
    width: 100%;
    height: 400px;
    bottom: 0;
    transition: 0.8s ease-in-out all;
}
.topfeatured .item .description {
    width: 100%;
    padding: 10px 30px;
    height: 150px;
    position: absolute;
    background: #263238;
    bottom: -170px;
    right: -30px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    transition: 1s ease-in-out;
}
.topfeatured .item:hover .description {
    bottom: 0;
    transition: 0.8s ease-in-out;
}
.topfeatured .item:hover .thumb {
    bottom: 80px;
}

这是 fiddle :http://jsfiddle.net/4653f7xk/3/

Answer 1

未更新问题的答案

只需删除 right: -30px。这是工作 fiddle :

http://jsfiddle.net/4653f7xk/4/