L'élément à l'intérieur div avec clip-path ne fonctionne pas avec la position absolue

Question

J'essaie d'ajouter une info-bulle dans un div qui a clip-path: polygon. Le problème est que je ne peux pas donner position: absolute à mon info-bulle (pour être au-dessus du div parent). Lorsque la div parent n'a pas de paramètre clip-path, tout fonctionne correctement.

Quelque chose comme ça:

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

Merci d'avance pour votre aide.

Answer 1

Ajout de "position: relative;" à ".house" devrait le résoudre.

La position absolue en CSS concerne le premier élément parent où la position n'est pas statique. La valeur par défaut de CSS pour la position est Statique, c'est pourquoi cela ne fonctionne probablement pas pour vous.

Le violon: 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; 
}