Getting a divs z-index to overlap a div with absolute positioning

Question

Does anyone know how I could get the logo at the top of my page to appear on top of the curtains.

http://nuigums.tumblr.com/

The logo is within a section tag along with the rest of the content with a z-index of 2, which is required to get the footer reveal effect I want. The curtain has a z-index of 3. I tried setting the z-index of the logo div to 4 but I presume the fact that the sections styling overrides that?

I would like the logo to scroll with the content of the page also.

Thanks. :)

I guess this will help you: http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — AntonNiklasson, Sep 27 '12 at 15:56

score 1 · Accepted Answer · edited Sep 27 '12 at 16:31

1

Leave the position:relative from the section element. and for the logo:

#logo{
    position:absolute;
    z-index:10;
    width:890px;
    text-align:center;
}

You will need to change properties of the slider(top, left, z-index).

edited Sep 27 '12 at 16:31

Mihai Iorga

39,330
16
106
107

answered Sep 27 '12 at 15:36

Loïc bcn

154
5

score 1 · Answer 2 · answered Sep 27 '12 at 15:43

1

div#logo needs to be outside of the section, which is already below the #curtain.

put div#logo before the section and set position:absolute then you should be able to see the kind of stacking you want.

answered Sep 27 '12 at 15:43

Moe Tsao

1,054
6
9

score 0 · Answer 3 · answered Sep 27 '12 at 15:43

0

One line missing:

position:relative;

You can only adjust z-index if you specify position.

answered Sep 27 '12 at 15:43

Paul Herron

831
1
9
22

Getting a divs z-index to overlap a div with absolute positioning

3 Answers3