CKEditor工具栏固定顶部失效求助：内容可滚动工具栏随页滚动

算力阿峰

2026-8-17

CKEditor 工具栏随页面滚动消失，如何在页面可滚动场景下固定工具栏并实现内容区域滚动？

我需要实现的效果是：让CKEditor的工具栏固定在顶部，同时编辑器的内容区域可以滚动。但目前工具栏会随着页面滚动移出屏幕，而且因为这个组件所在的页面本身是可滚动的，直接用position:fixed属性无法解决问题。

另外，页面中的「Question Stem」标签是用Vuetify Toolbar组件包裹的，这个标签已经能保持在顶部。

现有CKEditor工具栏CSS：

.ck.ck-toolbar {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

我已添加的内容滚动CSS：

#ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
   position: relative !important;
   z-index: 10;
}
#ckEditorQuestionStem .ck.ck-editor__main {
  max-height: 400px;
  overflow-y: auto;
  position: relative !important;
}