html - First divs on top -

i want first relative div's on top. want in pure css. want left image on top..

so have 3 images: - , give them css style - div.img relative > > div.imga absolute. - relative div leading z-index.

i tried things nth-child, add z-index of new elements. don't know if / how possible first relative div on top.

.img {      position: relative;      width: 25vw;      height: 25vw;      display: inline-block;      background-repeat: no-repeat;      background-position: 50% 50%;  }    .imga {      position: absolute;      width: 35vw;      height: 35vw;      background-image: url("http://executivefinance.nl/wp-content/uploads/2015/03/big-data.jpg");      background-size: cover;      border: 5px solid;      border-color: white;      border-radius: 25px 2px 100px 10px;      background-repeat: no-repeat;      background-position: 50% 50%;  }

<div class="img">  <div class="imga"></div>  </div>  <div class="img">  <div class="imga"></div>  </div>  <div class="img">  <div class="imga"></div>  </div>

and codepen here: http://codepen.io/zoutepopcorn/pen/lwkywj?editors=1100

when it's not possible, have stick jquery :(.

https://codepen.io/zoutepopcorn/pen/ryeazj  settimeout(function() {   var zi = $('.img:first').css('z-index') + 1 + "";   $("#cont").prepend('<div class="img"><div class="imga"></div></div>');   $('.img:first').css('z-index', zi); }, 300); 

oh. wait. think understand set-up trying achieve now.

there no need z-index.

just use float: right

example:

.img {      position: relative;      left: -8vw;      float: right;      width: 25vw;      height: 25vw;      margin-right: 5vw;      display: inline-block;      background-repeat: no-repeat;      background-position: 50% 50%;  }    .imga {      position: absolute;      width: 35vw;      height: 35vw;      background-image: url("http://executivefinance.nl/wp-content/uploads/2015/03/big-data.jpg");      background-size: cover;      border: 5px solid;      border-color: white;      border-radius: 25px 2px 100px 10px;      background-repeat: no-repeat;      background-position: 50% 50%;  }

<div class="img">  <div class="imga"></div>  </div>  <div class="img">  <div class="imga"></div>  </div>  <div class="img">  <div class="imga"></div>  </div>