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

标签 css flexbox

在创建 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 类定义中注释/取消注释定位。

最佳答案

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

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

现在一切都很好。

关于css - Z 堆叠 CSS 3 Flex 框 : how to overlay DIVs that are flexbox items?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18475111/

相关文章:

html - CSS 全页宽水平菜单和水平子菜单

html - 如何让背景图像/图像通过 CSS 拉伸(stretch)以填充容器?

css - 如何从 flexbox 中的所有包装行中删除左右边距(没有 nth-child 或 js)

html - flex 元素和负 z-index 数

html - CSS + flex + 高度 100%

css - 全高列和带有 flexbox 的标题

html - 使用第 n 个 child 来选择一个特定的 sibling

html - 将一个 Div 推到另一个下方

jQuery 和 CSS 可滚动然后延长固定标题

css - IE CSS 错误 : IMG original height affecting parent height