z-index在被定义为其他值后将变为auto。

要解决这个问题，您可以使用CSS中的calc()函数和z-index属性的初始值auto。您可以使用calc()函数来创建一个计算值，以便将z-index属性设置为auto或其他值。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

CSS:

.container {
  position: relative;
}

.box1 {
  position: absolute;
  z-index: calc(1 + var(--custom-z-index, 0)); /* 使用calc()函数和自定义变量来设置z-index值 */
  background-color: red;
  width: 200px;
  height: 200px;
}

.box2 {
  position: absolute;
  z-index: calc(2 + var(--custom-z-index, 0));
  background-color: blue;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
}

在上面的示例中，我们使用calc()函数和自定义变量--custom-z-index来设置z-index的值。如果--custom-z-index变量未定义，它将使用0作为默认值。您可以在需要更改z-index的地方使用--custom-z-index变量。

要更改z-index的值，您可以使用JavaScript来更改--custom-z-index变量的值。例如：

JavaScript:

document.documentElement.style.setProperty('--custom-z-index', '10');

在上面的代码中，我们将--custom-z-index变量的值更改为10。这将导致.box1和.box2的z-index值分别为11和12。

请注意，为了使calc()函数和自定义变量起作用，您需要将--custom-z-index变量应用于适当的元素或选择器，以便在需要时更改z-index的值。