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

Question

I am trying to add a tooltip in a div which has clip-path: polygon . The problem is that I can't give position: absolute to my tooltip (to be above the parent div). When parent div doesn't have a clip-path regule everything works fine.

Something like that:

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

Thanks in advance for your help.

Answer 1

Adding "position: relative;" to ".house" should solve it.

Position absolute in CSS relates to the first parent element where the position is not static. The default value in CSS for position is Static, that's why it probably does not work for you.

The fiddle: 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;
}