CODEWITHSUNDEEP
csshtmldom
Johan Hoeksma
Johan Hoeksma

Reputation: 3766

First divs on top

I want my first relative div's on top. I want to do this in pure css. So i want the left image on top..

So say I have 3 images: - And I give them a CSS style - div.img RELATIVE > > div.imga ABSOLUTE. - So the RELATIVE div is the leading z-index.

I tried things like nth-child, to add z-index of new elements. But I don't know if / how its possible to be the 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 a codepen is here: http://codepen.io/zoutepopcorn/pen/LWKYWj?editors=1100

When it's not possible, I have to stick with a 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);

Upvotes: 1

Views: 61

Answers (2)

Rounin
Rounin

Reputation: 29501

Oh. Wait. I think I understand the set-up you are trying to achieve now.

There is no need for 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>

Upvotes: 1

Rounin
Rounin

Reputation: 29501

I don't know if / how its possible to be the first relative div on top.

I'm not absolutely sure that I understand your question correctly.

Do you want the relative-positioned parent element to be visible above the absolute-positioned child element?

If so, you can use clip-path to "cut out" a section of the child, revealing the relative parent element beneath - and making it look like the parent is "on top".

Working Example:

.img {
    position: relative;
    width: 25vw;
    height: 25vw;
    display: inline-block;
    background-position: 5px 5px;
    background-repeat: no-repeat;
    background-size: 21vw 21vw;
    background-image: url('http://placekitten.com/150/140');
    border-radius: 30px 0 0 0;
}

.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%;
    clip-path: url("#clip-shape");
}

.img:hover .imga {
clip-path: none;
}
<h2>Hover over any image</h2>

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

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

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

<svg>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0.58 0, 1 0, 1 1, 0 1, 0 0.58, 0.58 0.58" />
</clipPath>
</svg>

Upvotes: 0

Related Questions