本文介绍了为什么插入符号在可满足的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修复问题：
.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也可以解决此问题：
.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)解决问题：
.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
这篇关于为什么插入符号在可满足的With位置不可见：Relative？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！