文本不与图像CSS重叠

我不明白为什么我的文字没有与图像重叠。我看到图像下方的文字。


<div className="row location-row location nopadding justify-content-center">

    <div className="col-md-4 location-padding">

          <img className="img-thumbnail img-responsive" src={("./Components/Images/Pula.jpg")} />

          <h2><span className="badge badge-warning">Pula</span></h2>

    </div>

    <div className="col-md-4 location-padding">

        <img className="img-thumbnail img-responsive" src={("./Components/Images/Liznjan.jpg")} />

         <h2><span className="badge badge-warning">Liznjan</span></h2>

    </div>

</div>

CSS



.location-padding {

    padding: 20px 20px;

    position: relative;

}


.location-padding h2 {

    position: absolute;

    left: 10px;

    top: 20px;

}

.location-row {

    margin: 0% 12.5% 0% 12.5%;

}

我得到什么:

https://img1.sycdn.imooc.com/6551c873000107fa04900483.jpg

冉冉说
浏览 130回答 2
2回答

四季花海

通过添加 z-index 属性来编辑 h2 标签,如下所示:.location-padding h2 {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 10px;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; z-index:1;}

米琪卡哇伊

您可以使用 z 索引:.location-padding h2 {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 10px;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; z-index: 999;}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5