Почему элемент с более низким значением zindex отображается поверх элемента с более высоким z-индексом с использованием css?

Question

У меня есть элемент popup_overlay с более высоким zindex, который появляется под элементами left_control_wrapper и right_control_wrapper с низким значением zindex.

ниже мой код,

.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. как мне это сделать. может кто-нибудь помочь мне с этим. спасибо.

Answer 1

Я думаю, что проблема здесь в том, что

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

Content Wrapper, который содержит PopUp, имеет более низкий индекс Z, чем левый и правый Control Wrapper. Поскольку всплывающее окно обернуто отделом Content-wrapper, оно отображается под остальными.

Увеличьте z-index этой оболочки содержимого, и он должен работать так, как вы хотите.