如何实现具有不同z-index的多个锚点重叠？

Question

我在我的角度应用程序中创建了一个viewportscroller，在同一页面中有不同的锚点。

首先在CSS中，锚点具有不同的z-index重叠，但是如果我达到目标ID，我想更改z-index。

举例来说，我单击锚点step2，所以我转到id步骤2，我想看到锚点step1继续进行步骤1。我想进行双向旅行，但我真的不知道如何做到

<h1 id="step1">Step 1</h1>

<div> some elements</div>


<a [routerLink]="['/']" fragment="step1" class="b_step1" title="Back to step 1">&#94;</a>

<h1 id="step2">Step 2</h1>

<div> some elements</div>

<a [routerLink]="['/']" fragment="step2" class="b_step2" title="Back to step 2">&#94;</a>

<h1 id="step3">Step 3</h1>

<div> some elements</div>