我希望我的第一个相对 div 位于顶部。我想在纯 css 中做到这一点。所以我想要左边的图像在顶部..
所以说我有 3 个图像： - 我给它们一个 CSS 样式 - div.img RELATIVE > > 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>一个代码笔在这里：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);
哦。等待。我想我理解你现在想要实现的设置。
没有必要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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句