css - 如何将 CSS 箭头添加到绝对定位的元素

Question

很多次我都成功使用了the cssarrowplease technique它强制主要元素(不是箭头)相对定位。然而这次我要添加箭头的元素已经绝对定位。

如何解决这个难题？

编辑:这是我的代码:

HTML

<li id="submenu">
    <div id="enquiries_popup">
        <div id="enquiries_popup_content">
            Content
        </div>
    </div>
</li>

CSS

li#submenu {
    position: relative;
}
#enquiries_popup {
    position: absolute;
    padding-top: 30px;
}
#enquiries_popup_content {
    background: #000;
}
#enquiries_popup_content:after { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: rgba(0, 0, 0, 0); 
    border-bottom-color: #000000; 
    border-width: 8px; 
    margin-left: -8px; 
}

Answer 1

好吧，我知道已经晚了，你是对的，它没有显示，因为位置是绝对的，箭头矩形不在框内，例如，如果你将底部设置为 50%，你会看到它们。解决方案是将这个 div 放在另一个绝对位置的 div 中并给它一些填充，然后将弹出 div 位置设置为 relative 就可以了!

<li id="submenu">
   <div id="absolute_div">
     <div id="enquiries_popup">
      <div id="enquiries_popup_content">
        Content
       </div>
     </div>
   </div>
 </li>

CSS

#enquiries_popup {
position: relative;
padding-top: 30px;
}
#absolute_div {
position: absolute;
padding-top: 30px;
}