考虑以下示例：https ://codepen.io/anon/pen/OOrMLm
每个白色块都可以单击，它会显示一个小的红色弹出窗口，我需要用户在其中做出一些选择。
在 Firefox 上，一切似乎都运行良好（如果我display:inline-block;在白色元素上使用），但在 Chrome 和 Safari 上，这些行为有点奇怪。
这两个错误如下：
position:absolute显示位于右侧的红色弹出窗口似乎会影响列中的流量（蓝色块扩展），而在 Firefox 中则不会（这是我想要的）- 在与第二个蓝色 div 重叠的红色弹出窗口内单击不会被捕获为弹出窗口内的单击（似乎弹出窗口以某种方式位于第二个蓝色 div 的“下方”）。
我玩过强迫z-index和transform: translateZ()但没有运气。它似乎display: flow-root;对 Chrome 有点帮助，但我无法让它完全工作。
关于如何在 Chrome 和 Safari 中解决此问题的任何想法？