Using negative margin to place div on top of another

Question

I'm trying to place a div on top of another but I don't understand why text inside div.servicios-info is over the image but the background-color isn't.

.imagen-servicio img {
    border: 6px #ffffff solid;
}
.servicio-info {
    background-color: #ec6a6a;
    margin-top: -5rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
      <div class="row">
        <div class="col-md-4 text-center">
          <div class="imagen-servicio">
            <img src="https://via.placeholder.com/300.png" class="img-fluid">
           
              <div class="servicio-info">
                <h3 class="text-uppercase">
                  <span class="text-lowercase">know about</span> <br> us
                </h3>
                <a href="#" class="text-uppercase btn btn-primary">read more</a>
              </div>
            
          </div>
        </div>
      </div>
    </div>

add position: relative; to it – Temani Afif Feb 09 '21 at 19:33 — Temani Afif, Feb 09 '21 at 19:33
adding position:relative does the trick for me – Sjonchhe Jan 19 '23 at 04:00 — Sjonchhe, Jan 19 '23 at 04:00

score 0 · Answer 1 · answered Feb 09 '21 at 17:39

0

You can try something like this:

CSS

.servicio-info {
position: relative;
background-color: #ec6a6a;
margin-top: -5rem;
z-index:10
}

answered Feb 09 '21 at 17:39

LucasSousa

136
1

score 0 · Answer 2 · answered Feb 09 '21 at 17:45

This code seems to do it.

<!DOCTYPE html>
<html>
<head>
<style> 
.imagen-servicio img {
    border: 6px #ffffff solid;
    z-index: -1;
    position: relative;
}
.servicio-info {
    background-color: #ec6a6a;
    margin-top: -5rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>


<div class="container">
      <div class="row">
        <div class="col-md-4 text-center">
          <div class="imagen-servicio">
            <img src="https://via.placeholder.com/300.png" class="img-fluid">
           
              <div class="servicio-info">
                <h3 class="text-uppercase">
                  <span class="text-lowercase">know about</span> <br> us
                </h3>
                <a href="#" class="text-uppercase btn btn-primary">read more</a>
              </div>
            
          </div>
        </div>
      </div>
    </div>
</body>
</html>

Using negative margin to place div on top of another

2 Answers2