Text not overlapping image css

Question

I don't understand why my text isn't overlapping the image. I see the text just below the image.

<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%;
}

What I get:

You probably have another html or css that create this issue, the code you provided works fine — Elman Huseynov, Apr 07 '20 at 18:01
@GigaMeta try to add z-index: 10; to your h2 tag just in case. — Elman Huseynov, Apr 07 '20 at 18:03
Add `z-index: 1;` with `h2`. `.location-padding h2{position: absolute;left: 10px;top: 20px;z-index: 1;}` — Rahul, Apr 07 '20 at 18:05
@GigaMeta after adding z-index? if yes please tick my answer as green please. — Elman Huseynov, Apr 07 '20 at 18:05

score 1 · Accepted Answer · answered Apr 07 '20 at 18:05

1

Edit your h2 tag, by adding z-index property like this:

.location-padding h2 {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index:1;
}

answered Apr 07 '20 at 18:05

Elman Huseynov

1,127
1
8
18

score 0 · Answer 2 · answered Apr 07 '20 at 18:15

0

you can use z-index:

.location-padding h2 {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 999;
}

answered Apr 07 '20 at 18:15

Tarik Billa

137
1
4

Text not overlapping image css

2 Answers2