如何在 Sphinx 文档内容之上显示 Algolia 文档搜索弹出窗口？答案

【问题标题】：How to get Algolia docsearch popup showing on top of Sphinx docs content?如何在 Sphinx 文档内容之上显示 Algolia 文档搜索弹出窗口？
【发布时间】：2021-01-30 20:30:50
【问题描述】：

我有一个 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

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

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

我也尝试为多个 CSS 类更改 z-index，但没有成功。

希望有人可以帮助我。这是 Algolia docsearch 下拉列表的链接：

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

更新：根据@tridle 的建议，我在 docsearch.css 中修改了这个类，将位置从相对位置更改为固定位置似乎可以解决问题：

.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;
}

【问题讨论】：

标签： css python-sphinx algolia

【解决方案1】：

对于css类.ds-dataset-1添加position: fixed;

【讨论】：

你在哪里找到那个css类？我没看到。你的意思是 .algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {?
我检查了您的 CodePen 示例，找到了带有 .ds-dataset-1 类的
，将 position: fixed; 添加到其中，并且它有效。我所说的
可能会生成。我不确定。