如何实现具有正z索引的多步进度条？

<div class="progress-bar">
  <div class="step active">Step 1</div>
  <div class="step">Step 2</div>
  <div class="step">Step 3</div>
</div>

.progress-bar {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 5px;
  overflow: hidden;
}

.step {
  float: left;
  width: 33.33%;
  padding: 10px;
  text-align: center;
  background-color: #e0e0e0;
  color: #ffffff;
}

.step.active {
  background-color: #4caf50;
}

// 获取步骤元素和进度条容器
const steps = document.querySelectorAll('.step');
const progressBar = document.querySelector('.progress-bar');

// 设置初始索引
let currentIndex = 0;

// 更新进度条状态
function updateProgressBar() {
  steps.forEach((step, index) => {
    if (index <= currentIndex) {
      step.classList.add('active');
    } else {
      step.classList.remove('active');
    }
  });

  // 计算进度条宽度
  const progressWidth = (currentIndex / (steps.length - 1)) * 100 + '%';
  progressBar.style.width = progressWidth;
}

// 下一步按钮点击事件
document.getElementById('next-btn').addEventListener('click', () => {
  if (currentIndex < steps.length - 1) {
    currentIndex++;
    updateProgressBar();
  }
});

// 上一步按钮点击事件
document.getElementById('prev-btn').addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex--;
    updateProgressBar();
  }
});