时间戳

首页 > 解决方案 > 为什么使用 css 的 zindex 值较低的元素会出现在 z-index 较高的元素之上？

html - 为什么使用 css 的 zindex 值较低的元素会出现在 z-index 较高的元素之上？

问题描述

我有 zindex 较高的 popup_overlay 元素出现在 zindex 值较低的 left_control_wrapper 和 right_control_wrapper 元素下方。

下面是我的代码，

.main {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
}

.controls_wrapper {
  display: flex;
}

.left_control_wrapper,
.right_control_wrapper {
  /*elements with low zindex and appearing above 
   popup_overlay */
  display: flex;
  z-index: 4;
}

.content_wrapper {
  z-index: 3;
  position: relative;
}

.card {
  display: flex;
  position: absolute;
}

.footer {
  display: flex;
}

.wrapper {
  display: flex;
}

.popup_overlay {
  /*element appearing below left_control_wrapper and right_control_wrapper*/
  display: flex;
  position: fixed;
  z-index: 100;
  background:red;
}
<div class="main">
  <div class="controls_wrapper">
    <div class="left_control_wrapper"> <!-- element with lower zindex and appears above //popup_overlay -->
      <button>add</button>
    </div>
    <div class="right_control_wrapper"> <!-- //element with lower zindex and appears above //popup_overlay //dropdown menu -->
    </div>
  </div>
  <div class="content_wrapper">
    <div class="card">
      <div class="footer">
        <div class="wrapper">
          <button>popup</button>
          <div class="popup_overlay"> <!-- //this is the element with higher z-index -->
            <div class="popup_dialog>some content</div>
                            <div class=" popup_notification>something</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望 left_control_wrapper 和 right_control_wrapper 出现在 popup_overlay 下方。我该怎么做。有人可以帮我解决这个问题。谢谢。

标签： htmlcss

解决方案

我认为这里的问题是

.content_wrapper {
    z-index: 3;
    position: relative;
}

保存 PopUp 的 Content Wrapper 的 Z 索引低于左右控件 Wrapper。由于 Pop up 由 content-wrapper Division 包装，因此它显示在其他窗口下方。

所以增加这个内容包装器的 z-index 并且它应该可以按你的意愿工作。

推荐阅读