我有一个应用程序，其中一些 DOM 内容是在用户交互时由 javascript 生成的。它实际上是 chatWrappers，可以在用户点击时淡入/淡出。
所以我基本上在页面周围有各种聊天气泡，每次用户单击一个聊天气泡时，它都会根据单击的顺序更新 jQuery 对象数组，并动态设置所有 z-indexes 相应地，以确保最后单击的内容位于顶部。
该代码适用于页面加载上存在的元素。但是，当动态创建其他 chatBubbles 时(实际上是其他用户请求加入事件，允许他们与主持人聊天)，较高的 z 索引元素不会出现在页面顶部，即使 ChromeDevTools 指示它们具有较高的 z-index。
这对我来说是一个 CSS 之谜。
使其工作的唯一方法是将除最后一个单击的 z-index 之外的所有 z-index 设置为 0。但这会导致另一个 CSS 错误。
最佳答案
Z-index 仅适用于也具有 css 规则“position:xxxxx;”的元素(可以是绝对的或相对的)
参见说明here .
元素可以具有position:relative，而无需实际移动其位置。如果您在 css 中不使用 top、left、right 或bottom，则除了使 z-index 属性起作用之外，position:relative 不会对元素的位置执行任何操作。
某些浏览器(例如 Chrome)可能会尝试在没有位置属性的情况下使 z-index 工作，但这种行为在浏览器之间可能有所不同。
关于jquery - 在动态创建的 DOM 元素上设置 z-index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26192791/