css - 可以使用相同的图标来打开和关闭模式吗？

Question

我想知道我是否可以使用触发全屏、半透明 Bootstrap 模式(我已自定义)的“相同”图标(或看起来相同的东西)弹出然后关闭它位于同一位置的图标。

但是，假设它最初是普通页面上的汉堡包图标，当我单击该图标弹出模态菜单时，它现在位于模态下方。有没有办法让它保持在模态之上？我尝试了 z-index，但无法正常工作。

对我来说棘手的事情是我想让图标从汉堡包过渡到 X，然后在它关闭时反之亦然:http://sarasoueidan.com/blog/navicon-transformicons/

最初我希望我能让图标过渡，然后以某种方式将图标设置在所有内容之上，包括模态。

任何想法或建议都会很棒，谢谢。

Answer 1

用 z-index 应该可以做到这一点。但是，z-index 仅适用于将“position”设置为“static”(默认值)以外的元素。尝试将 position: relative 添加到您的打开/关闭按钮，希望您应该能够使用 z-index 将按钮保持在叠加层的前面。

CSS Tricks 上有一个很好的引用资料，其中包含有关 z-index 的更多信息.