将绝对元素始终放在其他元素下

Question

我想设计一个通知图标（铃声）。当我点击它时，我想用jquery（绝对元素）淡化一个绝对的div容器。 我的问题是，如果窗口改变了他的大小，div会改变他的位置。

如何“修复”我的绝对元素以防止这种情况？

信息：绝对元素是通知框。

CSS：

#notifi-content{
    margin: 1rem 0 0 0;
    height: 10rem;
    width: 10rem;
    background: #fff;
    border: 0.1rem solid #eee;
    position: absolute;
    right: 20%;
    left: 70%;
}

HTML：

<ul>
    <li id="search-button">
        <span class="fa fa-search"></span>
    </li>
</ul>
<div id="notifi-content"></div>

修改

小提琴：http://jsfiddle.net/SebiPuck/ngp20226/ 再说一遍：我想要的是：即使我调整窗口大小，notifi内容也应该低于我的搜索按钮。

Answer 1

如果你使用百分比来固定你描述的绝对元素的位置（调整大小时改变位置）是正常的行为，

所以你应该使用相对位置和/或检查你是否可以在包装器内嵌套以保持结构。

顺便说一句，如果你提出一个小提琴，你将获得更多的帮助_

---

这是working fiddle在div #notifi-content上的无定位属性，只是将其嵌套在列表中;

Answer 2

您是否尝试使用像素代替百分比进行绝对定位？