无法编辑具有“contenteditable”和绝对定位元素的元素

Question

尽管设置了 z-index，但内容元素不可编辑（无法 select）。如何在元素仍然可编辑的情况下实现悬停效果？

#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

这是why你的z-index不工作。

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).

试试这个：

#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>

Answer 2

这将是一种更直接的方法，只使用一个元素和一个 pseudo-element。您可以使用指针事件来确保较大的背景仅在您将鼠标悬停在较小的交互区域时可见。

.content {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid;
}
.content:before {
  content: ' ';
  position: absolute;
  display: none;
  inset: -10px;
  background: rgba(90,90,90,0.25);
  z-index: -1;
}
.content:hover:before {
  display: block;
  pointer-events: none;
}

<div class="content" contenteditable>Edit me</div>

无法编辑具有“contenteditable”和绝对定位元素的元素

cannot edit element with `contenteditable` and absolute positioned element

html

css

contenteditable