Question

我需要显示一组tile（使用flexbox布局），其中每个tile都有一个“expando”子项 - 在悬停时 - 应该扩展超出父限制。除z-index外，此部分有效。毕竟，这并不让我感到惊讶，因为每个磁贴都会创建自己的z-index堆叠上下文。我只是失去了如何解决它的想法。

我真的需要让这些瓷砖和它们的孩子自成一体（以后再提取成角形组件）。

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

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

.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问题重叠

2 个答案: