jQuery news ticker, tucking behind other jQuery plugins and Images

Question

I cannot successfully recreate this error in a fiddle. Here's a link to the site (which will never come down).

When you arrive at the site, you'll see a news ticker at the bottom of the site. As you scroll down, you'll notice as you pass 1. Main Slider, 2. Announcement Slider, and 3. Images for Military, Nursing, and Georgia... the ticker gets tucked behind all of these.

How can I keep this on top?

I've already placed this script to be called after the DOM is loaded, and before the slider script is called...

$(function() {
    $('div.latest-news').jNewsbar({
        position: 'bottom',
        effect: 'slideup',
        height: 25,
        animSpeed: 600,
        puaseTime: 4000,
        toggleItems: 5,
        theme: 's-orange'
    });
});     

It's using jQuery 1.9.1 (CDN).

Answer 1

First, you can give the CSS Class jnewsbar the attribute z-index: 99

The reason that the other elements — which are OVER the newsbar — are over the newsbar is that they are all position: relative which makes them open for the z-index. And the newsbar is position: absolute — which is also subject to z-index

Due to the fact, that all of the other elements are coming in the DOM later, they are getting a higher "priority", than the newsbar.

So either you use z-index: 99 or you move the jnewsbar DIV down in your HTML.