不使用z-index，如何将CSS实现的圆形上方的绿色线条置于下层？

要实现不使用z-index把绿色叉号放到红色圆形边框下层，有两种改动成本很低的方案：

方案1：3D变换层级调整（仅新增2行代码，原有逻辑完全不变） #

利用CSS 3D堆叠特性，Z轴更靠近用户的元素会展示在上层，不需要用到z-index：

1. 给按钮容器开启3D堆叠上下文：加transform-style: preserve-3d属性
2. 给红色边框的<b>元素设置Z轴偏移：加transform: translateZ(1px)属性

修改后完整CSS如下：

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background: blue;
  border: none;
  border-radius: 50%;
  clip-path: circle(50%);
  transition: all 1s ease;
  overflow: hidden;
  transform-style: preserve-3d; /* 新增 */
}

.exitnew:before,
.exitnew:after {
  content: "";
  position: absolute;
  height: 5px;
  top: 22px;
  left: -1px;
  right: -1px;
  background: green;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exitnew:after {
  transform: rotate(-45deg);
}

.exitnew:hover {
  background: transparent;
}

.exitnew:hover:before,
.exitnew:hover:after {
  background: green;
}

.exitnew b {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 5px solid red;
  border-radius: 50%;
  transform: translateZ(1px); /* 新增 */
}

HTML代码不需要任何改动。

方案2：背景渐变实现叉号（无需伪元素） #

把绿色叉号直接做在按钮的背景层，子元素的红色边框默认就会覆盖在背景上层，从根源上避免层级冲突：

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  /* 渐变实现绿色叉号 + 蓝色背景 */
  background: 
    linear-gradient(45deg, transparent calc(50% - 2.5px), green calc(50% - 2.5px), green calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(-45deg, transparent calc(50% - 2.5px), green calc(50% - 2.5px), green calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    blue;
  border: none;
  border-radius: 50%;
  clip-path: circle(50%);
  transition: all 1s ease;
  overflow: hidden;
}

.exitnew:hover {
  /* hover时背景变透明，保留叉号 */
  background: 
    linear-gradient(45deg, transparent calc(50% - 2.5px), green calc(50% - 2.5px), green calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(-45deg, transparent calc(50% - 2.5px), green calc(50% - 2.5px), green calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    transparent;
}

.exitnew b {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 5px solid red;
  border-radius: 50%;
}

这种方案可以删掉原来的:before、:after伪元素代码，进一步精简体积。

内容的提问来源于stack exchange，提问作者user17382064