Позиционирование div прямо под центром уведомлений

Question

Я пытаюсь воспроизвести то, что многие веб-сайты называют центром уведомлений. У YouTube есть причудливое настроение, где он позиционирует падение вниз под значком и не затягивает его слишком далеко или будет со страницы.

Вот что я работаю с: http://jsfiddle.net/rgt03mu4/19/

Но это не кажется, что бы я ни делал, я не могу показаться, чтобы получить мое выпадающее меню, чтобы перейти непосредственно ниже моей колокольни. Это все из-за этого кода:

.notification-popup-container-main { 
position: absolute; 
} 

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

Answer 1

Добавить right и top Координаты.

.notification-popup-container-main {position: absolute; right: 0; top: 50px;} 

http://jsfiddle.net/rgt03mu4/20/

Answer 2

Вы, вероятно, хотите относительное позиционирование, чтобы сделать его отзывчивым:

.notification-popup-container-main { 
    position: relative; 
    float: right; 
    top: 40px; 
    right: -30px; 
    width: 100px; 
} 

Однако, есть много способов решить эту проблему, не попробовать другие предложения и выяснить, какие работы лучше всего для ваше приложение.

Answer 3

Нравится этот здесь? Я расколол ур скрипку.

http://jsfiddle.net/6j8g2jvf/1/

<div class='notification-popup-container-main'> 
    <div class="div-right"> 
     <a id='notification-link' class='block' href='#'> 
      <img src='http://docs.blackberry.com/en/smartphone_users/deliverables/50635/mwa1358788933767_lowres_en-us.png' alt='Notifications' /> 
     </a> 
    </div> 
<div class='notification-popup-container'> 
    <div class='notification-popup-body'> 
     <div class="notification-popup-title">TITLE 1</div> 
     <div class="notification-popup-message">MESSAGE 1</div> 
    </div> 
</div> 
<div class='notification-popup-container'> 
    <div class='notification-popup-body'> 
     <div class="notification-popup-title">TITLE 2</div> 
     <div class="notification-popup-message">MESSAGE 2</div> 
    </div> 
</div> 
<div class='notification-popup-container'> 
    <div class='notification-popup-body'> 
     <div class="notification-popup-title">TITLE 3</div> 
     <div class="notification-popup-message">MESSAGE 3</div> 
    </div> 
</div> 
</div> 


.div-right { 
    padding-top: 8px; 
} 

.div-right a { 
    margin:0 auto; 
} 

.block { 
    display:table; 
    padding: 3px; 
} 
.notification-popup-container-main { 
position: absolute; 
    right:0; 
    top:50px; 
} 
.notification-popup-container { 
    background-color: #fff; 
    border: 1px solid rgba(100, 100, 100, .4); 
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); 
    overflow: visible; 
    display: none; 
} 

.notification-popup-body { 
    padding: 10px 0px 0px 0px !important; 
} 

$(function() { 
    var nContainer = $(".notification-popup-container"); 

    //notification popup 
    $("#notification-link").click(function() { 
     nContainer.toggle(); 
     return false; 
    }); 

    //page click to hide the popup 
    $(document).click(function() { 
     nContainer.hide(); 
    }); 

    //popup notification bubble on click 
    nContainer.click(function() { 
     return false; 
    }); 
});