CODEWITHSUNDEEP
csshtml
Ben
Ben

Reputation: 8991

Divs not using z-index

The issue

I have a fixed navigation bar on my website (z-index: 98) and a rotating banner (z-index: 96).

When I scroll down, however, the content positioned relatively on the banner appears higher (in z-space) than the navigation bar.

Screenshots

Screenshot 1 Screenshot 2

Code

Banner:

div#banner {
    padding-top:60px;
    z-index: 98;
    width: 100%;
    background: url(../img/bannerImg_1.jpg) no-repeat center center;
    background-size:cover;
    height:340px;
    border-bottom: 1px solid #422358;
    box-shadow: 0 10px 10px -10px black;
    z-index: 96;
}

div#banner div#bannerWrap {
    width:1080px;
    margin: 0 auto;
    height:100%;
    position:relative;
}

div#bannerWrap div#logoLeft {
    position:absolute;
    top:50%; margin-top:-164px;
    left:0;
    width:305px;
    height:328px;
    background: url(../img/bannerLogo.png) no-repeat center center;
    float:left;
}

div#bannerWrap div#logoRight {
    position:absolute;
    top:50%; margin-top:-164px;
    right:0;
    width:305px;
    height:328px;
    background: url(../img/bannerLogo.png) no-repeat center center;
    float:right;
}

div#bannerWrap div#textRight {
    position:absolute;
    top:50%; margin-top:-20px;
    right:0;
    text-align:right;
    color:white;
    font-weight:bold;
    font-size:28px;
    text-shadow: 3px 3px 0 #1f3848;
    float:right;
}

Navbar:

div#topBar {
    width:100%;
    height:60px;
    margin:0 auto; padding:0;
    background: #1f3848;
    color:white;
    font-size:12px;
    position:fixed;
}

div#topBar div#tBContainer {
    width:1080px;
    margin: 0 auto; padding: 0;
}

div#topBar div#tBLogo {
    width:56px;
    height:60px;
    background: url(../img/tB_logo.png) no-repeat;
    display:block;
    float:left;
    margin-right:20px;
}

div#topBar div#tBLeft {
    float:left;
    padding-top:15px;
}

div#topBar div#tBRight {
    float:right;
    padding-top:15px;
    text-align:right;
}

Upvotes: 0

Views: 91

Answers (3)

Kiran
Kiran

Reputation: 125

z-index repeated twice please check. and you don't have to specify any z-index to div#banner. please follow below css

div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}

div#topBar {
    width:100%;
    height:60px;
    margin:0 auto; padding:0;
    background: #1f3848;
    color:white;
    font-size:12px;
    position:fixed;
    z-index:2;
}

Upvotes: 1

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

By default, z-Index doesn't work with position:static elements.

It only works with position:relative/absolute/fixed elements.

This might work:

   div#banner
    {
        position:relative;
        z-index:96;
    }

Reference: z-index - CSS-Tricks

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10265

why you giving the z-index value twice? Also by watching the screenshot its clear banner is coming over the navigation because of higher z-index value. either give this one negative value or the give the positive higher value to navigation.

div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}

Note: while using z-index its required to use positioning either relative or absolute

Upvotes: 1

Related Questions