Я не могу обработать z-индекс с абсолютной позицией

Question

Здесь есть codesandbox , который запускает код, вы поймете, что кнопка more (3 точки) отображается над more-menu. Нажмите на 3 точки, чтобы увидеть, что я имею в виду.

Вот код CSS more-menu:

.more-menu {
  position: absolute;
  top: 100%;
  z-index: 900;
  float: left;
  width: fit-content;
  margin-top: 29px;
  margin-left: calc(50% - 45px);
  background-color: #fff;
  border: 1px solid #ccd8e0;
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  -webkit-transform: translate(0, 15px) scale(0.95);
  transform: translate(0, 15px) scale(0.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;
}

.more-dot {
  background-color: #d7262c;
  margin: 0 auto;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

<div class="show-more-menu">
  <button id="more-btn">
    <span class="more-dot" />
    <span class="more-dot" />
    <span class="more-dot" />
  </button>
  <div class="more-menu" aria-hidden="true">
    <div class="more-menu-caret">
      <div class="more-menu-caret-outer" />
      <div class="more-menu-caret-inner" />
    </div>
  </div>
</div>

Answer 1

Использование свойства transform в элементах container дает им собственный контекст стека , который наследуется контейнерами more.А поскольку ваши кнопки и меню являются родственными элементами, свойство z-index не имеет отношения к их позициям относительно друг друга.Простым решением было бы просто удалить transform из ваших .container элементов и найти другой способ расположить их так, как вы хотите.Я бы дал предложение, но я не совсем уверен, какой эффект вы собираетесь получить.

Я сделал fork , где я только что удалил transform и top: 100% изменю по центру, но складывается так, как вы хотели.