css - 第一个 div 在上面

Question

我希望我的第一个相关 div 位于顶部。我想用纯 css 来做这个。所以我想把左图放在最上面..

假设我有 3 张图片: - 我给他们一个 CSS 样式 - div.img 相对 >> div.imga 绝对。 - 所以 RELATIVE div 是领先的 z-index。

我尝试了 nth-child 之类的东西来添加新元素的 z-index。但我不知道它是否/如何成为顶部的第一个相对 div。

.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>

代码笔在这里:http://codepen.io/zoutepopcorn/pen/LWKYWj?editors=1100

当不可能时，我必须坚持使用 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);

Answer 1

哦。等待。我想我了解您现在想要实现的设置。

不需要z-index。

只需使用float: right

示例:

.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>