jquery - 将绝对元素始终置于其他元素之下

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>

编辑

fiddle :http://jsfiddle.net/SebiPuck/ngp20226/再次强调:我想要的是:通知内容应该在我的搜索按钮下方，即使我调整了窗口大小。

Answer 1

如果您使用百分比来固定绝对元素的位置，您所描述的(调整大小时改变位置)是一种正常行为，

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

顺便说一句，如果你提出一个 fiddle ，你会得到更多的帮助 easy_

---

这是一个 working fiddle在 div #notifi-content 上没有 no 定位属性，只是将其嵌套在列表中；