Question

我尝试复制许多网站称之为＆＃34;通知＆＃34;中央。 YouTube有一个奇特的设置，它将下拉位置完全定位在图标下方，并确保不会将其延伸太远或者不在页面之外。

以下是我正在使用的内容： http://jsfiddle.net/rgt03mu4/19/

但似乎无论我做什么，我似乎无法将我的下拉菜单直接放在我的钟下。这完全是因为这段代码：

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

如何更改定位，使其直接进入＆＃34; notification-link＆＃34;但是不要离页面太远？每当我接近将其定位在正确的方向时，警报将从页面延伸出来，迫使用户滚动查看它们。

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;
    });
});

将div放在通知中心正下方

3 个答案: