Skip link not visible when focused

[glin]

I'm migrating a doc site to Bootstrap 5 now and am loving all the new features and improvements, thanks for that! There were a couple minor visual/usability issues that I wanted to note from the upgrade.

Issue

The first issue is that the new skip link isn't visible when focused, and also causes the page to shift when focused, so it's a little odd when you navigate to a page and start tabbing.

You can reproduce this by going to any site using Bootstrap 5, like the pkgdown website, and press Tab. Here's what that looks like, with the Chrome inspector showing the skip link hidden behind the navbar:

Workaround

To prevent the skip link from being hidden behind the navbar, my workaround is to add CSS to extra.css that absolutely positions it and gives it a higher z-index than the sticky navbar (1030 I think). This is how most sites I've seen with skip links do it:

a[href='#main'] {
  position: absolute;
  z-index: 1040;
}

For my own site, I've also made it more visually prominent, more legible when overlapping navbar text, and added a tiny bit of margin to not clip the focus outline:

a[href='#main'] {
  position: absolute;
  margin: 4px;
  padding: 0.75rem;
  background-color: hsla(0, 0%, 100%, 0.9);
  font-weight: 600;
  text-decoration: none;
  z-index: 1040;
}