Question

我担心我不能正确理解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小提琴：http://jsfiddle.net/qZzYM/1/

Answer 1

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

z-index of elements in different parents in Chrome

basicaly

子元素永远不会比其父元素具有更高的z索引。这就是当你删除父zindex

时它的工作原理

强制z-index遵循固定定位

1 个答案: