css盒子的before ,after , 子元素的层叠关系解析及应用

解析:

在前端整个体系里, 屏幕除了我们能感受到的 X ,Y轴,还有条我们眼睛到屏幕的 Z轴.

Z轴示意图.png

Z轴的存在,就引申出一个问题: 各元素之间里观察者谁近谁远的问题. 也就是 ''上下文堆叠顺序 (stack contex)''
这里,我们来解析一个元素自己内部的上下文堆叠顺序,也就是元素的伪元素和元素的子元素之间的堆叠关系

请看下面一个例子 :

<!--  html -->
  <div class="box">
    <div class="item-1"></div>
    <div class="item-2"></div>
  </div>

/* css */
.box {
  height: 100px;
  width: 100px;
  background: #ddd;
    
}
.box::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 30px;
  background: blue;
  transform: translate( 40px , 10px)
}
.box::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 30px;
  background: orange;
  transform: translate( 65px , -60px)
}
.item-1 {
  height: 30px;
  width: 20px;
  background: green;
  transform: translate( 45px , -20px)
}
.item-2 {
  height: 30px;
  width: 20px;
  background: purple;
  transform: translate( 55px , -40px)
}

运行结果:

伪元素和子元素堆叠关系.png

解析总结:
盒子在默认情况下,也就是没有设置Z-index的情况下:

① 一个盒子它的 ::before伪类在最底层, ::after 伪元素在最上层, 其子元素在中间层
② 盒子的子元素堆叠关系由子元素在 html中的先后顺序, 谁出现的后面谁就在上面的一层.

应用:

我们通过上面的解析知道了盒子伪元素和子元素的关系, 但具体能体现在那些方面呢? 请看下图 :

带边框的提示框.png

上图效果怎么做到呢?! 那就运用到这里的堆叠关系了. 请看下面代码:

 <!-- html -->
  <div class="box">xx</div>

/* css */
.box {
  width: 100px;
  height: 100px;
  background: #bbb;
  border: 2px solid red;
  transform: translate( 50px, 10px);
  margin: 20px;
}
.box::after {  /*  after 在上 */
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent #bbb transparent;
  transform: translate( -14px , -39px)
}
.box::before { /*  before 在下 */
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  transform: translate( 42px , -42px)
}

简单概括步骤就是:

① 设置伪元素::before 背景颜色为盒子的边框颜色, 通过translate 移动到盒子上沿
② 设置伪元素::after 的背景颜色== 盒子的背景颜色 ,通过translate 移动到盒子上沿,但Y轴跟 before 的Y轴保持几个像素的距离.
③ 因为 after 背景颜色 == 盒子的背景颜色, 这样视觉上就达到了盒子有凸出来的颜色边框.