强制 z-index 尊重固定定位答案

【问题标题】：Forcing z-index to respect fixed positioning强制 z-index 尊重固定定位
【发布时间】：2013-04-19 18:29:43
【问题描述】：

恐怕我没有正确理解 z-index，并且无法让我的 CSS 分层。我试图让描述浮动在底部固定 div 上方，我认为使用 z-index 很简单 - 给它一个索引 3，高于页面上的其他两个单位。但由于某种原因，它的行为不如预期 - 谁能告诉我为什么？

HTML 示例：

<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;
}

如果我删除 .portfolio-slideshow 的 z-index，它会按预期工作。但为什么我必须这样做？我在这里遗漏了一些东西，但我不知道是什么。

我做了一个 JS Fiddle 在这里演示：http://jsfiddle.net/qZzYM/1/

【问题讨论】：

标签： css z-index

【解决方案1】：

刚刚回答了一个类似的问题

z-index of elements in different parents in Chrome

基本上

子元素的 z 索引永远不能高于其父元素。这就是当你删除父 zindex 时它起作用的原因

【讨论】：

你也可以继续这个吗？基本上有同样的问题。我试图帮助他，但我的解决方案没有奏效，我认为你可以解决他的问题：stackoverflow.com/questions/16101240/…
cmets 中的@wazaminator pete 似乎已经发布了一个可行的解决方案？？
感谢@Breezer 的回答-我想我必须找到另一种方法来做到这一点:-(