带有剪辑路径的 div 内的元素不适用于绝对位置

Question

我正在尝试在具有clip-path: polygon 的 div 中添加工具提示。问题是我不能将position: absolute 提供给我的工具提示（高于父 div）。当父 div 没有剪辑路径规则时，一切正常。

类似的东西：

<div>
<div class="house">
  <div class="tooltip">
   ITEM 1
   </div>
 </div>
</div>


.house {
 height: 91px;
 left: 72px;
 top: 81px;
 width: 57px;
 background-color: #fe0000;
}

.tooltip {
  background-color: #aaa;
  width: 150px;
  height: 30px;
  position: absolute;
  top: -20px;
}

提前感谢您的帮助。

Answer 1

添加“位置：相对；”到“.house”应该可以解决它。

CSS 中的绝对位置与位置不是静态的第一个父元素相关。 CSS 中位置的默认值是静态的，这就是为什么它可能不适合你。

小提琴：https://jsfiddle.net/anebkb42/2/

.house {
  height: 91px;
  left: 72px;
  top: 81px;
  width: 57px;
  background-color: #fe0000;
  position: relative;
}

.tooltip {
  background-color: #aaa;
  width: 150px;
  height: 30px;
  position: absolute;
  top: -20px;
}