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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (58)

很多时候我成功地使用了cssarrowplease技术,它强加了主要元素相对定位。但是这次我想要添加箭头的元素已经绝对定位。

如何解决这个难题?

这是我的代码:

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; 
}
提问于
用户回答回答于

解决方案是将此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;
}
用户回答回答于

需要的箭头是你的元素定位,才能在首位的箭头位置是相对于它。它适用于相对,绝对和固定定位。

扫码关注云+社区

领取腾讯云代金券