如何将滑行箭头放在滑行轨迹之外

<div class="track">
  <div class="arrow"></div>
</div>

.track {
  position: relative;
  height: 10px;
  background-color: #ddd;
}

.arrow {
  position: absolute;
  top: -10px; /* 将箭头放在滑行轨迹之外 */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #f00;
}

// 获取滑行轨迹和箭头的元素
const track = document.querySelector('.track');
const arrow = document.querySelector('.arrow');

// 设置箭头的初始位置
let position = 0;

// 定义滑行动画的函数
function slideArrow() {
  // 增加箭头的位置
  position += 10;

  // 将箭头的位置应用到样式中
  arrow.style.left = position + 'px';

  // 当箭头滑出滑行轨迹时停止动画
  if (position > track.offsetWidth) {
    clearInterval(arrowInterval);
  }
}

// 每100毫秒调用一次滑行动画函数
const arrowInterval = setInterval(slideArrow, 100);