javascript - Css/javascript 位置

Question

好吧，这是我的问题:

我需要数字后面的红框，而不是上面的。

我的CSS:

[data-counter]:after {
    background-color: #FF6969;
    background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
    height: 8px !important;
    margin-top: 4px;
    content: attr(data-counter);
    top: -10px;
    position: absolute;
    padding: 1px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset; 
    background-clip: padding-box;  
    font:bold 10px "Helvetica Neue", sans-serif; 
    color: white;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
    margin-left: -10px;

}​

我的javascript(笑)

$(function () {
    $('head').append('<style>#numberMps {display:none !important; }#sizeMps { color: red; width: 5px; margin-left: -7px; } </style>');
    $('#inbox_link').prepend('<div id="numberMps"></div>');
    var newMPs = ".main-content .statused .tcl.tdtopics:has(img[src='http://illiweb.com/fa/empty.gif?NEW']) a[href*='/privmsg?folder=inbox&mode=read&p']";
    $('#numberMps').load('privmsg?folder=inbox ' + newMPs, function () {
        $('#numberMps').after('<div id="sizeMps"></div>');
        var sizeMPs = $('#numberMps a').size();
        if (sizeMPs == '0') return;
        $('li a[href^="/privmsg?folder=inbox?BOX"]').attr('data-counter', ''+sizeMPs+'');
    });
});

看，javascript 获取消息数，css 绘制它。

有人有提示或解决方案吗？

Answer 1

尝试使用 z-index，它应该会有所帮助。