Question

在运行代码的codesandbox中，您会发现more上方显示了more-menu按钮（3个点）。单击三个点以了解我的意思。

这是more-menu的CSS代码：

.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属性可以为它们提供自己的stacking context，该属性由more容器继承。并且由于您的按钮和菜单是同级元素，因此z-index属性与它们相对的位置无关。一个简单的解决方法是从您的transform元素中删除.container并找到另一种以所需方式放置它们的方法。我会提出一个建议，但我不确定您要达到的效果。

我做了一个fork，在这里我刚刚从菜单中删除了transform和top: 100%，它们居中但可以根据需要堆叠。

我无法处理绝对位置的z-index

1 个答案: