文本不与图像CSS重叠

Question

我不明白为什么我的文字没有与图像重叠。我看到图像下方的文字。<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%;}我得到什么：

Answer 1

通过添加 z-index 属性来编辑 h2 标签，如下所示：

.location-padding h2 {

    position: absolute;

    left: 10px;

    top: 20px;

    z-index:1;

}

Answer 2

您可以使用 z 索引：

.location-padding h2 {

    position: absolute;

    left: 10px;

    top: 20px;

    z-index: 999;

}