Css/javascript position

Question

Well, this is my problem:

I need the red box behind the number , not above.

My 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;

}​

My javascript(lol)

$(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+'');
    });
});

Look, the javascript obatin the number of messages, and the css draw this.

Anyone have tips or a solution?

Answer 1

Try useing z-index, it should help.