Owl Carousel, show child absolute div, over parent overflow hidden div

Question

I am using owl carousel 2, I am facing following problem.

I have parent div with a name owl-stage-outer, it has overflow:hidden as per requirement of the carousel.

I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden

reference image

Link on which I am working

I have tried solution provided in this link, but it will only work on immediate child.

Thanks in Advance.

Answer 1

You can add this margin-left: 25px; its works.

<div class="owl-item active" style="width: 240px;margin-right: 60px;margin-left: 25px;">

EDIT :

Its works

add this of you container :

<div class="container" style="
    width: 1220px;
    padding: 0 40px 0 40px;
    overflow: hidden;
">

of your owl-stage-outer :

<div class="owl-stage-outer" style="
    overflow: visible;
">