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

Question

我有一个 Sphinx 文档站点，想添加 Algolia Search 支持。一切都很好，除了 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 类更改 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;
}

标签： csspython-sphinxalgolia

Answer 1

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