css - Z 堆叠 CSS 3 Flex 框 : how to overlay DIVs that are flexbox items?

Question

在创建 flexbox 布局时未能设法堆叠 div。要么它们在容器 div 中相互插入，要么我必须在覆盖层上使用 "position:absolute" 将 div 移出其容器上下文。

z-indices 似乎根本不起作用。

我正在使用最新版本的 chrome，并期待这种行为:http://dev.w3.org/csswg/css-flexbox/#painting

这是一个带有基本 flexbox 布局的 plunker: http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview来说明。

您必须在 css 中的 .overlay 类定义中注释/取消注释定位。

Answer 1

好的，刚刚意识到 z-index 只适用于定位元素。

在本例中，我需要设置 div .overlay 容器的高度(只需将 height:100% 放入 .bodybox)

现在一切都很好。