如何使指示器覆盖在选项卡上而不是相反

<div class="tabs">
  <ul>
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
  </ul>
  <div class="indicator"></div>
</div>

.tabs {
  position: relative;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  cursor: pointer;
}

li.active {
  background-color: #ccc;
}

.indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #333;
  width: 100px; /* 根据需要设置指示器的宽度 */
  transition: left 0.3s ease;
}

const tabs = document.querySelectorAll('.tabs li');
const indicator = document.querySelector('.indicator');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    tabs.forEach(tab => tab.classList.remove('active'));
    tab.classList.add('active');
    const activeTab = document.querySelector('.tabs li.active');
    const activeTabWidth = activeTab.offsetWidth;
    const activeTabLeft = activeTab.offsetLeft;
    indicator.style.width = `${activeTabWidth}px`;
    indicator.style.left = `${activeTabLeft}px`;
  });
});