The z-index for Document Editor toolbar causes the dropdown menus to be under images

[michalbilik]

📝 Provide detailed reproduction steps (if any)

1. Open Document editor docs.
2. Open Numbered lists options.
3. Scroll down.

✔️ Expected result

The dropdown menus should be above the images:

❌ Actual result

❓ Possible solution

Disabling this style fixes the issue:

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

It's also present in the tutorial: https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/document-editor.html#styles

📃 Other details

• Browser: All
• OS: macOS
• First affected CKEditor version: 40.0.0

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[stichingsd-vitrion]

In our case we added .document-editor__toolbar { /* Make sure the toolbar container is always above the editable. */ z-index: 10;

We use the https://ckeditor.com/docs/ckeditor5/latest/examples/builds/document-editor.html, so having the editor at 10 z-index is (for now) not causing any problem and fixes the z-index problem

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[nataliachodelski]

I was able to resolve this in a React implementation of the Decoupled editor with this (inspecting the page seemed to show some other UI elements had a z-index around 999, so I used. large value)

My particular issue involved the 'AI tools' dropdown appearing underneath a custom sidebar component.

.editor-container_document-editor .editor-container__toolbar {
  z-index: 9000;
  /* Ensures toolbar dropdowns are above other elements like sidebar */
}

My editor structure for reference:

    <div>
      <div className="main-container">
        <div
          className="editor-container editor-container_document-editor editor-container_include-outline editor-container_include-annotations editor-container_include-pagination dark:bg-white dark:text-black"
          ref={editorContainerRef}
        >
          <div className="editor-container__menu-bar" ref={editorMenuBarRef}></div>
          <div className="editor-container__toolbar" ref={editorToolbarRef}></div>
          <div className="editor-container__editor-wrapper">
            <div className="editor-container__sidebar absolute">
              <div ref={editorLeftSidebarRef}></div>
            </div>
            <div className="editor-container__editor">
              <div ref={editorRef}>
                {requirementsToLoadCKMet && (
                  <CKEditor
                    onReady={handleReady}
                    onAfterDestroy={handleDestroy}
                    onChange={handleEditorChange}
                    onError={handleEditorError}
                    editor={DecoupledEditor}
                    //@ts-ignore
                    config={editorConfig}
                  />
                )}
              </div>
            </div>
            <div className="editor-container__sidebar">
              <div ref={editorRightSidebarRef}></div>
                <SectionContextSidebar
                  currentSectionTitle={currentSectionTitle}
                  currentSectionData={currentSection}
                  allSections={sectionInformation}
                  updateSectionData={handleSectionSave} // saves section data, on the sidebar
                  onGenerateRequest={onGenerateRequest}
                  adminEnabled={adminEnabled}
              }
            </div>
          </div>
        </div>
      </div>
    </div>