使用负边距将 div 放在另一个 [重复]答案

【问题标题】：Using negative margin to place div on top of another [duplicate]使用负边距将 div 放在另一个 [重复]
【发布时间】：2021-02-10 01:45:03
【问题描述】：

我试图将一个 div 放在另一个 div 之上，但我不明白为什么 div.servicios-info 中的文本在图像上方，而 background-color 却没有。

.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>

【问题讨论】：

添加位置：相对；给它

标签： html css

【解决方案1】：

你可以试试这样的：

CSS

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

【讨论】：

【解决方案2】：

这段代码似乎可以做到。

<!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>

【讨论】：