Slick Slider, position object above slide absolute - overflow

Question

I've made a JSFiddle explaining what I would like to do with slick slide:
<div class="slider">
<div>
<div class="absolute">
Blabla
</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
</div>
CSS
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
In short: The red box in the first slide is invisible because it's inside the slide that has overflow hidden. I need the box to be a part of the first slide only and move with the slide.
Can anyone fix the JSFiddle example so this works, that would be much appreciated.

Answer 1

I found a hack for this you have to set a margin-top or padding-top on each slide element.
.slick-slide{
padding-top:25px
//margin-top:25px also working
}

Answer 2

Working fine. Make sure red box should be position absolute & and each slider have position relative. so that your red box is belong to that slide only
.slider > div{
position: relative;
}
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}