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

  • Z时代
  • 2024-01-10
  • 分类：问答

根据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属性上使用了适当的前缀。我不明白为什么它不起作用。

回答：

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

z-index即使使用position:

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

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

以上是 Flexbox，z-index和位置：静态：为什么不起作用？ 的全部内容， 来源链接： utcz.com/qa/419092.html

回到顶部