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>
Comments
Post a Comment