Chrome 和 Safari 中的 CSS 列数和绝对位置（z-index？）

Question

考虑以下示例：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 中解决此问题吗？

Answer 1

很酷，

transform: translateY(0)

可以在某种程度上将其从包装中取出。

您可以在显示弹出窗口之前设置容器的高度。尽管 Safari（以及某种程度上 Chrome）处理列的方式很困难，但这似乎对这种非常具体的情况有所帮助。

试试这个：

const wrappers = document.querySelectorAll(".main_wrap");

wrappers.forEach(wrapper => {  
  wrapper.style.height = wrapper.offsetHeight + "px";
});

// to make sure there is space for the popup on the page:
const lastWrapper = wrappers[wrappers.length - 1];
lastWrapper.parentNode.style.marginBottom = "200px";