Position A Div Inside A Smartphone Image

I'm trying to create a slideshow embedded inside a smartphone image for my website. Creating the slideshow is pretty easy using Owl Carousel. What i'm unable to do is placing my di

Solution 1:

Checkout the SNIPPET below.

$('.owl-carousel').owlCarousel({
    center: true,
    items:1,
    loop:true,
    margin:0
});

.screen.item{
  background-color:#5fba7d;
}

.phone{
    background-image: url(https://i.stack.imgur.com/vKQ2K.png);
    width: 320px!important;
    height: 650px;
    background-position: -25px0;
}

.no-js.owl-carousel, .owl-carousel.owl-loaded {
    position: relative;
    top: 48px;
    width: 278px;
    left: 20px;
    height: 100%;
}

.owl-stage-outer, .owl-item, .item{
  height:100%;
}

.owl-stage{
  height:calc(100% - 153px);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"rel="stylesheet" /><divclass="phone"><divclass="owl-carousel owl-theme screen"><divclass="item"><h4>1</h4></div><divclass="item"><h4>2</h4></div><divclass="item"><h4>3</h4></div><divclass="item"><h4>4</h4></div><divclass="item"><h4>5</h4></div></div><div>