css - z-index 不适用于变换 :translate(-50%, -50%)；

Question

在 box1:after z-index:1; 中不起作用。

.box1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: gray;
  border-radius: 50%;
}

.box1:after {
  content: '';
  position: absolute;
  left: -3.5px;
  top: -3.5px;
  width: 80%;
  height: 80%;
  border: 4px solid red;
  border-radius: 50%;
  z-index: -1;
}

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

有谁知道解决办法是什么？

Answer 1

你必须得到:before的帮助，像这样:

.box1 {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120px;
	height:120px;
        transform:translate(-50%,-50%);
}

.box1:before {
	text-align: center;
	line-height: 120px;
	content: 'click';
	position: absolute;
	width: 100%;
	height:100%;
	background-color: gray;
	border-radius: 50%;
}

.box1:after{
	content: '';
	position: absolute;
	left: -3.5px;
	top: -3.5px;
	width: 80%;
	height: 80%;
	border:4px solid red;
	border-radius: 50%;
	z-index:-1; 
}

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