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

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:

http://i.imgur.com/0FWxI.png

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

Thank you in advance!

Hello,

Can you provide us a link to the actual website or webpage of this problem? It is ideal to know the quantity of this situation.

Anyways (based on the given code), you should probably make the breadcrumb an external style sheet and make the Black overlay an internal or inline style component. This will do the cascading effect, making the overlay the priority of the source code.

Hello,

Can you provide us a link to the actual website or webpage of this problem? It is ideal to know the quantity of this situation.

Anyways (based on the given code), you should probably make the breadcrumb an external style sheet and make the Black overlay an internal or inline style component. This will do the cascading effect, making the overlay the priority of the source code.

Hello!

The page itself is under a restricted area, maybe you can take a look here (without the overlay though): http://www4.univali.br/sophia2

The breadcrumb is on an external style sheet and the overlay is inline, but the problem still happens :/

Thanks for the reply!