Flexbox，z-index和位置：静态：为什么不起作用？

小编典典

Flexbox，z-index和位置：静态：为什么不起作用？

css

根据flexbox规范：

..4.3。Flex Item Z-Ordering，…和z-index其他值（auto即使position是，也不会
创建堆叠上下文）static。

因此，我认为z-index/ opacity应该与flexbox一样正常工作，但是当我将它应用于此HTML /
CSS时它不起作用（我的目标是放在创建两层.header之上.core）：

 .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;

 }


<body>

  <div class="header">

    <div class="headerLeft">Left</div>

    <div class="headerCenter">Center</div>

    <div class="headerRight">Right</div>

  </div>

  <div class="core">

    <div class="coreItem">Core1</div>

    <div class="coreItem">Core2</div>

    <div class="coreItem">Core3</div>

    <div class="coreItem">Core4</div>

    <div class="coreItem">Core5</div>

    <div class="coreItem">Core6</div>

  </div>

</body>

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

阅读 569

2020-05-16

共1个答案

小编典典

就像你在你的问题中写道，元素并不需要被定位为z-index在柔性容器的工作。

z-index即使使用position: static，Flex项目也可以参与堆叠顺序，而其他CSS盒子模型（网格除外）则z-index仅适用于放置元素，而CSS盒子模型则不是这样。

4.3。弹性项目Z排序

Flex项的绘制与内联块完全相同，不同之处在于，order使用-
修改后的文档顺序代替原始文档顺序，以及创建堆叠上下文z-index以外的其他值（auto即使position是）static。

究其原因z-index是不是在你的代码的工作是div.header和div.core不挠的项目。它们是的子级body，但body不是flex容器。

为了让z-index在这里工作，你需要申请display: flex到body。

将此添加到您的代码：

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

2020-05-16