Can't get overlay on top of div [z-index]

[LucasVon]

Hello!
I'm the web designer for a system we use here in college, but I'm having a problem which I simply couldn't solve:

As you can see, there is a black overlay (with a white box which is the overlay content), but the breadcrumb is on top of the overlay. Here is the CSS:

Breadcrumb:

.navbar { 
    background: #1876a7;
    height: 20px;
    margin-bottom:-13px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
    position:relative;
    z-index: 9!important;
    top: 33px;
    color: #fff;
}

Black Overlay:

element.style {
background-color: black !important;
width: 100% !important;
height: 100% !important;
position: fixed;
left: 0px;
top: 0px;
opacity: 0.7;
z-index: 10 !important;
display: block;
}

The page itself is behind a restricted area, but the breadcrumb bar in question can be seen here: http://www4.univali.br/sophia2

Thank you in advance!

[chrishirst]

Looking at somebody else's HTML is of no use for solving the problem with yours.

but the breadcrumb is on top of the overlay

And where should it be?

[LucasVon]

Originally Posted by chrishirst

Looking at somebody else's HTML is of no use for solving the problem with yours.

And where should it be?

Well, since the overlay is the black bit which should cover everything in the page to show the overlay content better, then the breadcrumb should be behind it, being "dimmed" as everything else in the page.

[chrishirst]

Need to see the document URL.

Pictures can't be debugged and CSS is useless without the HTML.

[LucasVon]

http://www4.univali.br/sophia2
This is the furthest I can take you, beyond this is restricted area.

[chrishirst]

Then you are pretty much on your own. Without being able to SEE the problem or get to the code & the images together, there isn't a lot anybody can do.
Guessing what at it might be is not going to be any use at all.