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

Question

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

类似的东西：

<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

添加“position：relative;”到“.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; 
}