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

Question

在 Owl Carousel 中，我的绝对元素(放置在旋转木马元素中)遇到了问题，其类“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

未更新问题的答案

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

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