顶部的第一个 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>

这里有一个codepen：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>

Answer 2

我不知道是否/如何成为第一个相对 div 顶。

我不确定我是否正确理解了您的问题。

您是否希望相对定位的父元素在绝对定位的子元素上方可见？

如果是这样，您可以使用clip-path“剪掉”子元素的一部分，显示下方的相对父元素 - 并使其看起来像父元素“在顶部”。

工作示例：

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