cannot edit element with `contenteditable` and absolute positioned element

Question

The content element is not editable (not able to select it) despite the z-index being set. How can this hover effect be achieved with the element still being editable?

#outer {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}

#content {
  z-index: 100;
}

#background {
  z-index: 10;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

#background:hover {
  background: rgba(90, 90, 90, 0.25);
}

<div id="outer">
  <span id="content" contenteditable>Edit me!</span>
  <span id="background" />
</div>

Answer 1

This is why your z-index does not work.

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Try this one:

#content {
  position: relative;
  z-index: 100;
}

#outer {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}

#content {
  position: relative;
  z-index: 100;
}

#background {
  z-index: 10;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

#background:hover {
  background: rgba(90, 90, 90, 0.25);
}

<div id="outer">
  <span id="content" contenteditable>Edit me!</span>
  <span id="background" />
</div>