css box-shadow overlapped by element underneath

Question

There are a mix of form buttons and <a> tags in the included snippet. I've turned the outline off the buttons because I want them all to behave exactly the same way, which is to have a green highlight box shadow all the way round the clicked element.

But, when I click on any of these, the box-shadow overlaps only the element above it, but not the one below. I've tried turning the z-index up to 1001 as shown below but it does nothing - how can I get the box-shadow to overlap everything?

/*#region LEFTNAV*/
.leftnav {
    width: 200px;
    position: fixed;
    height: 100%;
    z-index: 500;
    overflow-x: hidden;
}

    .leftnav a, .leftnavbtn {
        z-index: 0;
        font-family: Calibri;
        white-space: normal;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        text-decoration: none;
        font-size: 14px;
        display: block;
        background-color: whitesmoke;
        color: black;
        border: 0;
        border-bottom: solid 1px #ddd;
        width: 180px;
        margin-top: 0px;
        margin-bottom: 0px;
        border-radius: 0px;
    }

        .leftnav a{
            width:160px;
        }

        .leftnav a:hover, .leftnavbtn:hover {
            cursor: pointer;
            background-color: #ddd;
            color: black;
        }

            .leftnav a:focus,
            .leftnav a:focus:active,
            .leftnav a:active,
            .leftnavbtn:focus,
            .leftnavbtn:active,
            .leftnavbtn:focus:active {
                outline: none;
                cursor: progress;
                box-shadow: lightgreen 0px 0px 3px 3px;
                z-index: 1001;
                transition: 0.1s;
            }

/*#endregion*/

<div class="leftnav">
  <div>
    <form method="post">
        <input type="submit" value="Option 1 - Form" class="leftnavbtn">
    </form>
    <a class="" href="#">Option 2</a>
    <a class="" href="#">Option 3</a>
    <form action="" method="post">
        <input type="submit" value="Option 4 - Form" class="leftnavbtn">
    </form>
    <form action="" method="post">
        <input type="submit" value="Option 5 - Form" class="leftnavbtn">
    </form>
    <a class="" href="#">Option 6</a>
  </div>
</div>

Answer 1

z-index only applies to positioned elements (other than the default of static). Add position: relative to your leftnav a, .leftnavbtn rule

/*#region LEFTNAV*/

.leftnav {
  width: 200px;
  position: fixed;
  height: 100%;
  z-index: 500;
  overflow-x: hidden;
}

.leftnav a,
.leftnavbtn {
  position: relative;
  z-index: 0;
  font-family: Calibri;
  white-space: normal;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  background-color: whitesmoke;
  color: black;
  border: 0;
  border-bottom: solid 1px #ddd;
  width: 180px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
}

.leftnav a {
  width: 160px;
}

.leftnav a:hover,
.leftnavbtn:hover {
  cursor: pointer;
  background-color: #ddd;
  color: black;
}

.leftnav a:focus,
.leftnav a:focus:active,
.leftnav a:active,
.leftnavbtn:focus,
.leftnavbtn:active,
.leftnavbtn:focus:active {
  outline: none;
  cursor: progress;
  box-shadow: lightgreen 0px 0px 3px 3px;
  z-index: 1001;
  transition: 0.1s;
}


/*#endregion*/

<div class="leftnav">
  <div>
    <form method="post">
      <input type="submit" value="Option 1 - Form" class="leftnavbtn">
    </form>
    <a class="" href="#">Option 2</a>
    <a class="" href="#">Option 3</a>
    <form action="" method="post">
      <input type="submit" value="Option 4 - Form" class="leftnavbtn">
    </form>
    <form action="" method="post">
      <input type="submit" value="Option 5 - Form" class="leftnavbtn">
    </form>
    <a class="" href="#">Option 6</a>
  </div>
</div>

Answer 2

.leftnav a:focus {
    z-index: 1;
    position: relative;
}