定位在html和CSS中无法正常工作

ek

嗨,我试图得到一张图片列表,一张放在另一张下面,每张图片的上方都有一些文字。我想到了这种布局。我有一个wrapper相对定位的主对象,其中包含一个img-txtdiv,它也具有相对定位。然后它包含两个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>
编辑:文本应在水平和垂直居中

ab29007

更改.iimgposition: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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章