为什么插入符号在可满足的With位置不可见：Relative？

当contenteditable元素具有position: relative和背景色时，插入符号放在该元素中时是不可见的。下面是一个例子：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.bug {
  position: relative;
  background-color: lightgrey;
}

<div contenteditable>
  This has caret
  <span class="bug">no caret here?!</span>
  this has caret
</div>

我的第一个想法是这是一个浏览器错误，但它在Chrome和Firefox上是完全相同的错误！

插入符号消失的原因是什么？是否有解决办法？

---

解决方案

不知道问题的确切原因，但您可以通过多种方法修复它。

我之前的解释(可能是错的)：

这不是错误，您将background color放在<span>标记上(在 position:relative)在可内容div元素中，因此 Span位于可内容目录的顶部。

我仍然认为这与z-index有关，因为我们可以在Chrome Focus边框顶部的红色背景下看到图像：

删除position:relative

删除<span>的position:relative修复问题：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.no-bug {
  background-color: red;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

将z-index添加到<span>元素

添加负值z-index也可以解决此问题：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.no-bug {
  background-color: red;
  position: relative;
  z-index: -10;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

将display: inline-block添加到<span>元素

添加display: inline-block(或display: block)解决问题：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.no-bug {
  background-color: red;
  position: relative;
  display: inline-block;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

其他堆栈溢出相关问题

• Edit cursor not displayed on Chrome in contenteditable
• contenteditable cursor doesn't appear