时间戳

首页 > 解决方案 > 始终在父母兄弟姐妹之上显示绝对位置 div

html - 始终在父母兄弟姐妹之上显示绝对位置 div

问题描述

我有一个内部动态行数的 div。每行都有一个绝对定位的工具提示，在悬停时触发。绝对定位的工具提示被父级的以下兄弟姐妹覆盖。

这是该问题的简单再现：

.row-containers {
  height: 250px;
  width: 600px;
  border: solid 1px gray;
}

.row {
  width: 100%;
  height: 25px;
  position: relative;
  z-index: 5;
}

.row:nth-child(odd) {background: #DDD}

.row:nth-child(even) {background: white}

.tooltip {
  height: 50px;
  padding: 5px;
  background: seagreen;
  position: absolute;
  top: 10px;
  left: 10px;
}
<div class="row-containers">
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row">
    <div class="tooltip">
    Hello I am hidden from view by my parent's siblings.
    </div>
  </div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

为什么会发生这种情况是众所周知的：无论 z-index/绝对定位如何，后面的兄弟姐妹优先于早期兄弟姐妹的孩子。

在一个类似的问题中，只有一个绝对定位的 div 需要优先考虑，简单的解决方案是给父级一个 z-index 值。

但在我的例子中，每一行及其兄弟都有一个绝对定位的 div 需要显示。给每一行一个 z-index 值并不是一个非常优雅的解决方案，因为它们每个都需要一个不同的 z 索引。这将需要使用 javascript 动态添加降序 Z 值。

有没有办法让所有绝对位置 div 仅使用 html/css 显示在其父母的兄弟姐妹之上？

标签： htmlcss

解决方案

推荐阅读