summernote编辑器下拉菜单隐藏在另一个编辑器后面

Question

复制步骤：

转到URL：https://summernote.org/examples/

点击字体/颜色下拉列表

它没有重叠/隐藏在另一个编辑器后面

任何帮助将不胜感激。

Answer 1

使用Chrome，我在summernote网站上的多重编辑器示例中看到了相同的问题，其中下拉菜单被以下编辑器的工具栏遮盖。即使z-index看上去正确（下拉菜单为1000，下面的工具栏为500），我也可以通过将下部工具栏的z-order强制为400来使其正确显示。

但是，当我使用变通办法创建js小提琴时，它似乎表现正常。

Working JSFiddle

HTML

<div class="multiple"><p>summernote 1</p></div>
<div class="multiple"><p>summernote 2</p></div>
<div class="multiple"><p>summernote 3</p></div>
<div class="multiple"><p>summernote 4</p></div>
<div class="multiple"><p>summernote 5</p></div>

JavaScript

$(document).ready(function() {
  $('.multiple').summernote();
});

我一直在与多个编辑器一起使用summernote，没有问题（我只是检查了它是否仍在工作）。

我对示例页面上的损坏内容没有任何答案，但是我也没有足够的声誉将部分答案/建议发布为评论。如果您在问题中发布jsfiddle，我也许可以提供进一步的帮助。

Answer 2

解决方法：将第二编辑器的z-index设置为0。

.note-editor {
  z-index: 0;
}

Answer 3

我什至尝试了其他解决方案，但对我没有用，或者没有用完。 这是我的解决方案：

col1

只需复制并粘贴到您的JavaScript中（使用jQuery）。 循环浏览页面上的所有工具栏，并将其设置为z-index。

Answer 4

在页面中添加以下样式。

.note-toolbar {
    z-index: auto;
 }