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

Question

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

我真的需要使这些图块及其子元素独立（稍后将提取到 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/

Answer 2

您可能需要更改 :hover 上 holder 元素的 z-index，只需添加到您的代码中：

.holder:hover {
  z-index:10
}

.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 {
  z-index:10
}

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

<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>

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

Expanded div overlapping its parent - z-index issue

css

expandable