Поместите абсолютный элемент всегда под другим элементом

Question

Я хочу создать значок уведомления (звонок). Когда я нажимаю на него, я хочу fadein абсолютного контейнера div с jquery (абсолютный элемент). Моя проблема заключается в том, что div меняет свое местоположение, если окно меняет свой размер.

Как я могу «исправить» мой абсолютный элемент, чтобы предотвратить это?

Info: Абсолютный элемент - это окно с уведомлением.

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> 

EDIT

Fiddle: http://jsfiddle.net/SebiPuck/ngp20226/ снова: то, что я хочу: notifi-контент должен быть ниже моей поисковой кнопки, даже если я изменяю размер окна.

Answer 1

ли вы попробовать использовать пиксели вместо процентов для абсолютного отношении расположения?

Answer 2

, если использовать проценты, чтобы зафиксировать положение абсолютного элемента, что вы описываете (меняет положение, когда изменение размера) нормальное поведение,

поэтому вы должны использовать относительное положение и/или если вы можете гнездо внутри поверку чтобы сохранить структуру.

КСТАТИ Если вы поднимете скрипку, вы получите гораздо больше помощи easy_

---

Вот working fiddle с не позиционирования собственности на DIV #notifi-content, просто вложен его в списке;