如何设置叠加的边距？答案

【问题标题】：How can I set margins of overlay?如何设置叠加的边距？
【发布时间】：2020-05-14 06:09:20
【问题描述】：

我在我的 div 中使用了背景图片和叠加层。但是叠加层没有正确重叠。由于某些原因，它在双方都留下了一些利润。我尝试设置边距，使其完全重叠，但随后它扰乱了我的布局。怎么改？

/*numscroller*/
.image{
	height:auto;
	width:100%;
	background:#FFCC99;
	}
.over2{
	height:auto;
	width:100%;
	background-color:rgba(0,0,0, 0.7);
	}
	.num{
		margin:auto;
		padding:6rem 0rem;
		float:left;
		}

<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row " >
    	<div class="col-12 image">
        
        	<div class="over2">
                <div class="row justify-content-around">
                    <div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
                        <center>
                          
                            <h3><b>Slums covered</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                    <div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
                        <center>
                            
                            <h3><b>Lives changed</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                    <div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
                        <center>
                            
                            <h3><b>Our supporters</b></h3>
                            <h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
                        </center>
                    </div><!--num col-10 ends-->
                </div><!--row justify ends-->
            </div><!--over ends-->
            
        </div><!--col-12 ends-->
    </div><!--row ends-->
</div>

【问题讨论】：

标签： javascript html css bootstrap-4 overlay

【解决方案1】：

图片容器可以相对定位，叠加层要绝对定位。

.image {
  position: relative;
  height: 100px;
  width: 100%;
  background: red;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="image">
    <span>I am the image </span>
    <div class="overlay">
      I am the overlay
    </div>
  </div>

【讨论】：