How do I always have an absolutely positioned image appear above all elements in a CSS grid?-CodePudding

I have a keyboard diagram to indicate to the user that they should be able to press a key to move from one cell of the CSS grid to another. The cells are set to the width and height of the browser. (The keypress does not function yet). Still, when I scroll up and down, the arrow key image remains, but when I scroll right, the right cells of the grid shove the image off the page? (It would also be nice to get rid of the negative margin on the body tag but that seems to be necessary when the image is a sticky element.

body {
  margin: 0;
  padding: 0;
  margin-top: -102px;
}

.nav-legend {
  position: sticky;
  top: 10px;
  padding-left: 10px;
}

https://codepen.io/russellbits/pen/eYjmWyg

CodePudding user response：

Not sure if it gets the desired result, but it seems that position: fixed might be suitable for the use case.

Forked demo with modification: codepen

Example:

body {
  margin: 0;
  padding: 0;
}

.nav-legend {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
}