css - CSS通知设计问题

Question

请看看这个：http: //jsfiddle.net/z9vGK/

通知必须出现在主页图标的前面。问题是，现在它显示为单独的 div 并修改了整个导航 div 的高度。如何在不更改导航 div 高度的情况下将此通知位置设置为主页图标的右上角？我错过了什么？

这是HTML：

<div id="nav">
        <ul class="navUl">
            <li><a data-original-title="Home Page" rel="tooltip" data-placement="bottom" href="?page=main" class="curPage"> <img src="http://goo.gl/1d2SO"></a></li>
            <li><a data-original-title="Categories" rel="tooltip" data-placement="bottom" href="?page=categories">
                    <img src="http://goo.gl/1d2SO"></a></li>
            <li>
                <div class="iOSnotifications">1</div>                <a data-original-title="History" rel="tooltip" data-placement="bottom" href="?page=history">
                    <img src="http://goo.gl/1d2SO">
                </a>
            </li>
            <li><a data-original-title="Settings" rel="tooltip" data-placement="bottom" href="?page=settings">
                    <img src="css/images/nav/settings.png"></a>
            </li>
            <li><a data-original-title="FAQ" rel="tooltip" data-placement="bottom" href="?page=faq">
                <img src="css/images/nav/help.png"></a>
            </li>
        </ul>

        <div id="langSelect"><ul>    <li><a href="?action=setlang&amp;lang=az&amp;page=main"><img src="https://ecruting.az/css/images/flags/az.png"></a></li>
        <li><a href="?action=setlang&amp;lang=en&amp;page=main"><img src="https://ecruting.az/css/images/flags/en.png" class="curLang"></a></li>
        <li><a href="?action=setlang&amp;lang=ru&amp;page=main"><img src="https://ecruting.az/css/images/flags/ru.png"></a></li>
    </ul></div>

    </div>​

和 CSS：

@charset "UTF-8";
#nav {
    font-family: "Helvetica Neue" , Helvetica , "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:12px;
    text-transform:uppercase;
    padding:0px;
    margin:0px;
    width:740px;
    clear:both;
    border:1px solid #bdbdbd;
    float:left;
    background:url(http://goo.gl/CeWJN) repeat-x bottom #fff;


    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    box-shadow:0 0px 5px 0px rgba(0,0,0, 0.23);
    -webkit-box-shadow:0 0px 5px 0px rgba(0,0,0, 0.23);

    -moz-box-shadow:0 0px 5px 0px rgba(0,0,0, 0.23);

    text-shadow: #fff  0px 1px 0px ;
}
#nav ul.navUl
{
    padding:0px;
    margin:0px;
    list-style:none;
    float:left;
}

#nav ul.navUl li 
{
    padding:0px;
    margin:0px;
    list-style:none;
    float:left;
    font-weight:bold;
    line-height:45px;

}
#nav ul.navUl a img
{
    height: 35px;
}

#nav ul.navUl a
{
    color:#205dd5;
    text-decoration:none;
    padding-left:30px;
    padding-right:30px;
    display:block;
    background:url(images/divider.jpg) right bottom no-repeat;
}
#nav ul.navUl a:hover
{
    background:url(images/NavHoverbg.jpg) no-repeat right top;
    color:#5585e4;
}
#nav ul.navUl li:first-child  a
{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}
a.curPage
{
    background:url(images/NavHoverbg.jpg) no-repeat right top !important;
}


/*Notification*/

.notif_container {
    display:inline-block;
    margin-right:15px;
    list-style-type:none;
}

.iOSnotifications {
    display: block;
    width: 18px;
    height: 16px;
    border-radius:15px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f89ba5), to(#cc0006));
    background: -moz-linear-gradient(top,#f89ba5,#cc0006);
    border:2px solid #fff;
    box-shadow: 0 2px 3px rgba(100, 100, 100, 0.5);
    text-shadow:none;
    color:#fff;
    text-align:center;
    line-height: 16px;
    font-size:11px;
    font-weight:bold;
    position: relative;
    top: 0px;
    left: 50px;
}​

Answer 1

您必须将 .iOSnotifications 设置为

{
position: absolute;
top: 0;
right: 0;
}

这将使它位于右上角，并且边界 div（它应该位于右上角的 div）到：

{
position: relative;
}

所以 css知道它是一个边界框。我在这里改变了你的小提琴：http: //jsfiddle.net/dasZj/