css - 显示覆盖另一个 div 的 div 边框

Question

我已经尝试了此处显示的方法，但没有成功:

StackOverflow: Display div border on top of another div [duplicate] (my own postage)

我有 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>