Chrome和Safari中的CSS列计数和绝对位置(z索引?)
考虑以下示例: 可以单击每个白色块,这会显示一个红色的小弹出窗口,我需要用户在其中做出一些选择 在Firefox上,一切似乎都很好(如果我在白色元素上使用Chrome和Safari中的CSS列计数和绝对位置(z索引?),css,google-chrome,z-index,absolute,column-count,Css,Google Chrome,Z Index,Absolute,Column Count,考虑以下示例: 可以单击每个白色块,这会显示一个红色的小弹出窗口,我需要用户在其中做出一些选择 在Firefox上,一切似乎都很好(如果我在白色元素上使用display:inline block;),但在Chrome和Safari上,行为有点奇怪 这两个错误如下所示: 在位于右侧的位置:absolute中显示红色弹出窗口似乎会影响列中的流(蓝色块会展开),而在Firefox中则不会(这正是我想要的) 在与第二个蓝色分区重叠的红色弹出窗口内单击将不会被捕获为弹出窗口内的单击(似乎弹出窗口在第二个
display:inline block;
),但在Chrome和Safari上,行为有点奇怪
这两个错误如下所示:
- 在位于右侧的
中显示红色弹出窗口似乎会影响列中的流(蓝色块会展开),而在Firefox中则不会(这正是我想要的)位置:absolute
- 在与第二个蓝色分区重叠的红色弹出窗口内单击将不会被捕获为弹出窗口内的单击(似乎弹出窗口在第二个蓝色分区的“下方”)。
z-index
和transform:translateZ()
,但运气不好。似乎显示:flow root
在Chrome上有点帮助,但我无法让它完全工作
你知道如何在Chrome和Safari中解决这个问题吗