Question

根据flexbox规范：

.. 4.3。 Flex项目Z-Ordering，......和z-index以外的值 auto即使position为static，也会创建堆叠上下文。

所以，我认为z-index / opacity应该像往常一样使用flexbox但是当我将它应用到这个HTML / CSS时它不起作用（我的目标是放{在.header创建两个图层的顶部{1}}：

＆＃13;

.core

＆＃13;

 .header {
   opacity: 0.5;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .headerLeft {
   z-index: inherit;
   background-color: blue;
   text-align: right;
   align-self: stretch;
   flex: 2 1 250px;
 }
 .headerCenter {
   z-index: inherit;
   background-color: red;
   text-align: right;
   align-self: stretch;
   flex: 1 1 175px;
 }
 .headerRight {
   z-index: inherit;
   background-color: green;
   text-align: right;
   align-self: stretch;
   flex: 1 1 100px;
 }
 .core {
   z-index: 0;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
 }
 .coreItem {
   align-self: stretch;
   flex: 1 1 400px;
 }

＆＃13;

我在flex属性上使用了正确的前缀。我不明白为什么它不起作用。

Answer 1

就像您在问题中所写的那样，元素不需要定位z-index才能在Flex容器中工作。

即使使用z-index，Flex项目也可以参与position: static堆叠顺序，但对于z-index仅适用于定位元素的其他CSS框模型（网格除外）则不然。< / p>

4.3. Flex Item Z-Ordering

Flex项目绘制与内联块完全相同，除了   使用order - 修改后的凭证订单代替原始凭证   订单以及z-index以外的auto值创建堆叠上下文   即使position是static。

z-index在您的代码中无效的原因是div.header和div.core不是灵活项目。他们是body的孩子，但body不是灵活容器。

为了z-index在此处工作，您需要将display: flex应用于body。

将此添加到您的代码中：

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

更多详情：https://stackoverflow.com/a/35772825/3597276

Flexbox，z-index＆amp; position：static：为什么它没有工作？

1 个答案: