我有一个应用程序，当用户进行交互时，javascript会生成一些DOM内容。它实际上是chatWrappers，可以在用户点击它时淡入/淡出。
所以我基本上在页面周围都有各种聊天气泡，每当我的用户点击一个时，它会根据点击的顺序更新jQuery对象数组，并相应地动态设置所有z-indexes到确保最后点击的是最重要的。
该代码适用于页面加载中存在的元素。但是当动态创建其他chatBubbles时（实际上其他用户要求加入事件，允许他们与主机聊天），更高的z-index元素不会出现在页面顶部，即使ChromeDevTools指示他们具有更高的z指数。
这对我来说是个谜。
使其工作的唯一方法是将所有z-index设置为0，但单击最后一个除外。但它会导致另一个css错误。
答案 0 :(得分：1)
Z-index仅适用于也具有css规则“position：xxxxx;”的元素（可以是绝对的也可以是相对的）
请参阅解释here。
元素可以具有位置：相对而不必实际移位其位置。如果你不在css中使用top，left，right或bottom，则position：relative将不会对元素的位置做任何事情，除非使z-index属性有效。
某些浏览器（例如chrome）可能会尝试使z-index在没有位置属性的情况下工作，但浏览器之间的行为会有所不同。