css - 扩展的 div 与其父级重叠 - z-index 问题

Question

我需要显示一组图 block (使用 flexbox 布局)，其中每个图 block 都有一个“expando”子元素，悬停时应该扩展到父元素限制之外。这部分有效，但 z-index 除外。毕竟这并不让我感到惊讶，因为每个图 block 都有自己的 z-index 堆叠上下文。我只是不知道如何解决它。

我真的需要让这些 tile 和它们的 child 独立(稍后提取到一个 Angular 组件中)。

---

HTML

<div class="row">
  <div class="holder">
    <div class="plate">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
    </div>
  </div>
  <div class="holder">
    <div class="plate">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
    </div>
  </div>
  <div class="holder">
    <div class="plate">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
    </div>
  </div>
</div>

---

CSS

.row {
  display: flex;
  padding: 3em;
}

.holder {
  position: relative;
  height: 100px;
  width: 100px;
  background: red;
  margin-right: 30px;
  z-index: 1;
}

.plate {
  display: none;
  border: 1px solid limegreen;
  background: rgba(255, 255, 255, 0.6);
  width: 190px;
  color: green;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  padding: 1em;
  box-sizing: border-box;
  z-index: 1000;
}

.holder:hover .plate {
  display: flex;
}

jsfiddle

Answer 1

你必须在 .holder:hover 上设置 z-index。

.holder:hover {
   z-index:10;
}

https://jsfiddle.net/hk149512/3/