Css 显示覆盖另一个div的div边框

我尝试过这里展示的方法，但没有成功：

我有两个嵌套的div，上面的方法不适用于这两个div

代码如下：

html:

注意：helperClass2应添加到父（外部）分区的类列表中。

.container{
位置：相对位置；
}
.box1{
宽度：100px；
高度：100px；
位置：绝对位置；
顶部：100px；
左：100px；
框大小：边框框；
背景：蓝色；
}
.box1:之后{
内容：''；
显示：块；
宽度：95px；
高度：95px；
位置：绝对位置；
边框：3倍纯黑；
z指数：3；
}
.box2{
宽度：100px；
高度：100px；
位置：绝对位置；
顶部：150px；
左：150px；
框大小：边框框；
背景：红色；
边框：3倍纯黑；
}

---

很抱歉，但这并不能解决我的问题，我需要上面的类和div的模式

<div className="App">
        <div class="box mainClass1" id="1">
          <div class="helperClass" />
        </div>
        <div class="box mainClass2" id="2">
          <div class="helperClass" />
        </div>
</div>

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.mainClass1 {
  top: 100px;
  left: 100px;
  background: teal;
}
.mainClass2 {
  top: 150px;
  left: 150px;
  background: red;
}

.helperClass2 .helperClass {
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}