要实现保持背景可控的同时重叠DIVs，可以使用CSS的position属性和z-index属性来控制。以下是一个示例代码：

HTML代码：

  
Overlay DIV
  
Background DIV

CSS代码：

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: 2;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5);
  z-index: 1;
}

在上面的示例中，.container类设置为position: relative;，使其成为包含overlay和background的相对定位的容器。

.overlay类和.background类都设置为position: absolute;，使它们的位置相对于.container进行定位。

.overlay的top和left属性设置为50px，使其相对于.container向下和向右偏移50px。

.background的top和left属性设置为0，使其相对于.container不偏移。

.overlay和.background都设置了一个半透明的背景颜色，并且在.overlay的z-index属性设置为2，.background的z-index属性设置为1，这样.overlay会在.background之上重叠显示。

通过使用这些CSS属性和值组合，可以实现保持背景可控的同时重叠DIVs。