I am having a z-index issue

Question

I have a slogan that should float above an image if the screen width is set to very wide. I've adjusted 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?

score 3 · Accepted Answer · edited May 23 '17 at 12:12

3

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?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 30 '11 at 20:43

Brad

159,648
54
349
530

You were correct and first. I will read up on your link. Thanks! – Evik James Sep 30 '11 at 20:47

score 2 · Answer 2 · answered Sep 30 '11 at 20:44

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

That's exactly what I did. Thanks! – Evik James Sep 30 '11 at 20:59 — Evik James, Sep 30 '11 at 20:59

I am having a z-index issue

2 Answers2