首先是div

Question

我希望我的第一个相对div在顶部。我想在纯css中这样做。所以我想把左图放在上面..

所以说我有3张图片：   - 我给他们一个CSS风格   - div.img RELATIVE＆gt; ＆GT; div.imga ABSOLUTE。   - 所以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

即可

示例：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>