Отображение границы раздела, наложенного на другой элемент div

Question

Я попробовал метод, показанный здесь, но он не сработал:

StackOverflow: отобразить границу div поверх другого div [duplicate] (мои собственные почтовые расходы)

У меня есть 2 вложенных div, и вышеупомянутый метод не работает для обоих div.

Вот код:

html:

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

css:

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

примечание: helperClass2 следует добавить в список классов родительского (внешнего) div.

Answer 1

.container {
  position: relative;
}
.box1 {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 100px;
 left: 100px;
 box-sizing: border-box;
 background: blue;
}

.box1:after {
  content: '';
  display: block;
  width: 95px;
 height: 95px;
 position: absolute;
 border: 3px solid black;
 z-index: 3;

}

.box2 {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 150px;
 left: 150px;
 box-sizing: border-box;
 background: red;
 border: 3px solid black;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>