html - flex 元素的子元素的 z-index

Question

我希望 flex 元素 (.image-container) 的绝对定位子元素 (.tag-preview-container) 与 DOM 中的其他元素重叠 (例如 header .header)。我将绝对定位元素的 z-index 设置为 2(即使是 1 也可以)。但是，该元素不会与 flex 容器 (.tags-panel) 之外的任何 DOM 元素重叠。事实上，它完全被容器切断了。我没有在 DOM 中设置任何其他元素的 z-index，因此根应该是堆叠上下文。

<div class="panel-container">
  <div class="header">

  </div>
  <div class="tags-panel">
    <div class="image-container">
      <div class="tag-preview-container">
      </div>
    </div>
    <div class="image-container">

    </div>
    <div class="image-container">

    </div>
    <div class="image-container">

    </div>
  </div>
</div>

这是 scss 代码，这里是 JSFiddle

.panel-container {
    width: 400px;
  height: 400px;
  position: relative;
  margin: auto;
  .header {
    width: 100%;
    height: 40px;
    background-color: green;
  }
  .tags-panel {
    position: absolute;
    background-color: red;
    top: 40px;
    bottom: 0px;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }
}

.image-container {
  flex: 0 0 33%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-top: 5px;
  margin-left: 1px;
  height: 80px;
  background-color: yellow;
  position: relative;
  .tag-preview-container {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    z-index: 2;
    opacity: 0.5;
  }
}

Answer 1

z-index 受 .tags-panel 中的 overflow 属性影响，移除 overflow-y: auto; 将解决问题。这是更新的 fiddle https://jsfiddle.net/yc5xanax/

overflow-y: auto; 将自动包装/隐藏 .tags-panel 容器之外的内容。