Css：z-Index和显示：弹性[复制]

2guxujil 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(201)

此问题已在此处有答案：

Why can't an element with a z-index value cover its child?（4个答案）
7天前关闭
我有一个页面，我想实现以下内容：
1.我有一个普通的页面，我在某些情况下想应用背景
1.当背景是积极的，我希望一个特定的div，以ble可见的顶部的背景
这工作得很好，直到我在我使用显示的页面上使用这个：挠曲
我已经制作了一个最小的例子来说明这个问题

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style type="text/css">
    .backdrop {
      position: fixed;
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    .child {
      background: #fff;
      z-index: 3;
      position: absolute;
    }

    header {
      z-index: 1;
      position: static;
    }

    .fullscreen {
      /*display: flex;*/
    }
  </style>

</head>

<body>
  <div id="root">
    <div class="fullscreen">
      <header>
        should be below backdrop
        <div class="child">should be above backdrop</div>
      </header>
      <div class="backdrop"></div>
    </div>
  </div>
</body>

</html>

这如预期的那样工作：

但是，当我添加显示时：flex到fullscreen-div它不工作：

我意识到我可以删除显示：flex，但这会破坏我网站上的其他功能。另一个选项是删除header元素上的z索引，但这会导致其他问题。
所以我一直在想怎么解决这个问题。有什么想法吗
JsFiddle with the attached example

css

来源：https://stackoverflow.com/questions/76364471/css-z-index-and-display-flex

1条答案

按热度按时间

n1bvdmb61#

其中一个选项是在.backdrop中设置较低的z-index：

.backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1; /* 👈 */
}

.child {
  background: #fff;
}

.fullscreen {
  display: flex;
}

<div id="root">
  <div class="fullscreen">
    <header>
      should be below backdrop
      <div class="child">should be above backdrop</div>
    </header>
    <div class="backdrop"></div>
  </div>
</div>

P.S.如果你想知道为什么会发生这种情况：Stacking context
元素，它是flex容器的子元素，z索引值不是auto。
您的固定代码：

.backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.child {
  background: #fff;
  z-index: 3;
  position: absolute;
}

header {
  z-index: auto; /* 👈 */
  position: static;
}

.fullscreen {
  display: flex;
}

<div id="root">
  <div class="fullscreen">
    <header>
      should be below backdrop
      <div class="child">should be above backdrop</div>
    </header>
    <div class="backdrop"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-07

我来回答

Css：z-Index和显示：弹性[复制]

1条答案

相关问题

热门标签

最新问答