I am having a z-index issue

I have a slogan that should float above an image if the screen width is set to very wide. I've adj开发者_运维问答usted the z-index in countless ways, but can't figure out exactly how to it.

The site is here: http://www.i-exercisebikereviews.com/?62/exercise-bike-reviews-schwinn

the CSS is here: http://i-treadmillreviews.com/css/style.cfm

Specifically, the #Slogan is the words:

Home Exercise Bike Reviews - Top Picks - Sales - Coupons

The #Human is the ultra hot chick on the exercise bike:

How to I make the the slogan rise above the human (instead of behind the human) when the browser is very wide?

The problem is that you have the z-index property of your #Under div set to 0. Remove that, and you're fine.

See also: can I override z-index inheritance from parent element?

Removing entirely the z-index on #Under fixes it:

#Under {
    margin: 0px;
    width: 100%;
    height: 61px;
    position: relative;
    top: 0px;
    left: 0px;
    /*z-index: 0;*/
    overflow: visible;
    background:  url("background2.png") top left repeat-x;
    background: url("background2.png") top left repeat-x, -moz-linear-gradient(top, rgb(240,240,240), rgb(256,256,56));
    background: url("background2.png") top left repeat-x, -webkit-gradient(linear, 0 0, 0 100%, from(rgb(240,240,240)), to(rgb(256,256,56)));
    background: url("background2.png") top left repeat-x, -o-linear-gradient(top, rgb(240,240,240), rgb(256,256,56));
}

Style.cfm line 40