很多次,我成功地使用了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;
}
发布于 2016-06-08 15:14:50
嗯,很晚了,我知道,你是对的,它没有显示,因为位置是绝对的,箭头矩形从盒子里出来了,例如,如果你把底部设置为50%,你就会看到它们。解决方案是将这个div放在另一个带有绝对位置的div中,并给它一些填充,然后将弹出的div位置设置为相对位置,它就可以工作了!
<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;
}
https://stackoverflow.com/questions/26985876
复制相似问题