0

I'm afraid I'm not understanding z-index properly, and can't get my CSS to layer as I'd like it to. I'm trying to get a description to float above a bottom fixed div, which I thought would be simple with z-index - give it an index of 3, higher than the two other units on the page. But for some reason it's not behaving as expected - can anyone tell me why?

HTML example:

<div id="wrapper">
    <div class="portfolio-slideshow">
        <div class="slideshow-meta">
            <p class="slideshow-title">My Title</p>
        </div>
    </div>
</div>
<div id="footer-hairline">
</div>

CSS:

#wrapper {
    margin: 0 190px 0 100px;
}
.portfolio-slideshow {
    margin: 10px 0 0;
    z-index: 1;
    clear: both;
    position: relative;
}
.slideshow-meta {
    position: fixed;
    bottom: 30px;
    font-size: 13px;
    color: #989799;
    line-height: 14px;
    z-index: 3;
}
#footer-hairline {
    height: 70px;
    width: 100%;
    border-top: 1px solid #CCC;
    background: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

If I remove .portfolio-slideshow's z-index, it works as expected. But why should I have to do that? I'm missing something here, but I can't figure out what.

I made a JS Fiddle to demonstrate here: http://jsfiddle.net/qZzYM/1/

Nick
  • 839
  • 1
  • 10
  • 19

1 Answers1

1

Just answered a similiar question a moment ago

z-index of elements in different parents in Chrome

basicaly

a child element can never have a higher z index then its parent. That's why it works when you remove the parent zindex

Community
  • 1
  • 1
Breezer
  • 10,410
  • 6
  • 29
  • 50
  • could you as well please go on this one? there is basically the same problem. I tried to help him, but my solution didn't work, and I think you can solve his problem : http://stackoverflow.com/questions/16101240/sticky-elements-with-background-attachment-as-fixed – wazaminator Apr 19 '13 at 10:39
  • @wazaminator pete in comments seems to already have posted a working solution?? – Breezer Apr 19 '13 at 10:52
  • Thanks for the answer @Breezer - I'll have to find another way to do this I guess :-( – Nick Apr 20 '13 at 15:01