嗨,我试图得到一张图片列表,一张放在另一张下面,每张图片的上方都有一些文字。我想到了这种布局。我有一个wrapper
相对定位的主对象,其中包含一个img-txt
div,它也具有相对定位。然后它包含两个div,一个用于图像,另一个用于文本。但是我的图像为什么彼此堆叠?
.wrapper{
position:relative;
}
.img-txt{
position: relative;
}
.iimg{
position: absolute;
}
.text{
position: absolute;
}
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
更改.iimg
为position:relative;
并添加z-index
到文本。您可以使用top
和调整文本的位置left
.wrapper{
width:400px;
margin:0;
padding:0;
border:1px solid black;
}
.img-txt{
position: relative;
width:100%;
margin:0;
padding:0;
}
.iimg{
position:relative;
width:100%;
margin:0;
padding:0;
}
.iimg img{
width:100%;
margin:0;
padding:0;
display:block;
}
.text{
position: absolute;
top:50%;
left:50%;
z-index:10;
}
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句