如何让 Algolia docsearch 弹出窗口显示在 Sphinx 文档内容之上？

Question

我有一个 Sphinx 文档站点，想添加对 Algolia 搜索的支持。一切都很好，除了 Algolia docsearch 弹出窗口显示在我的 Sphinx 内容面板后面。此处报告了非常相似的问题：https://github.com/algolia/docsearch/issues/130 但该解决方案对我不起作用。

我创建了这个 codepen 沙箱来重现这个问题：

https://codepen.io/adolfo1981/pen/LYbEEme

当您开始在搜索框中键入内容时，Algolia 弹出窗口会显示在我的内容面板后面的右侧。这是 Algolia docsearch 的引用 CSS：https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css

我按照此处的建议尝试了这些 CSS 设置的所有组合 https://github.com/readthedocs/sphinx_rtd_theme/issues/761 但没有任何效果：

.wy-nav-side { overflow: visible;  }
.wy-side-scroll { overflow: auto; }

我也尝试更改多个 CSS classes 的 z-index 但没有成功。

希望有人能帮我解决这个问题。这是 Algolia docsearch 下拉列表的 link：

https://docsearch.algolia.com/docs/dropdown

UPDATE：根据@triddle 的建议，我在 docsearch.css 中修改了这个 class 将位置从 relative 更改为 fixed 似乎可以解决问题：

.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
  position: fixed;
  border: solid 1px #d9d9d9;
  background: #fff;
  border-radius: 4px;
  overflow: auto;
  padding: 0 8px 8px;
}

Answer 1

为 css class .ds-dataset-1 添加 position: fixed;

如何让 Algolia docsearch 弹出窗口显示在 Sphinx 文档内容之上？

How to get Algolia docsearch popup showing on top of Sphinx docs content?

css

python-sphinx

algolia