css - 元素上的 z-index 在 css 中设置为 9 但在 Chrome Inspector 中显示为 0 > "Computed"值

Question

我试图让一些元素以特定的顺序相互重叠。它应该是从上到下:

• id 为“credit”的“footer”元素中的文本
• id 为“kepler”的“a”元素，包含一张猫图片
• 背景图片，其父元素的 id 为“slide-3”

我有以下 HTML

        <div class="slide" id="slide-3">
            <img src="https://mrengy.github.io/card2016/img/silhouettes.jpg" alt="silhouettes against wall with pattern" class="full-img" />
            <footer id="credit" class="main wrapper clearfix">
                <h2>
                    <a href="http://anilaagha.com/intersections/">Intersections, 2013</a>
                </h2>
                <p>by Anila Quayyum Agha</p>
                <p>Displayed at the Peabody Essex Museum</p>
            </footer>
            <a href="http://placekitten.com/" id="kepler">
                <img src="https://mrengy.github.io/card2016/img/kepler.png" alt="our cat, Kepler"/>
            </a>
        </div>

和下面的 CSS

html {
    color: #FFF;
    font-size: 1em;
    line-height: 1.4;
}

.slide {
    width:100%;
    position:absolute;
    text-align:center;
}

.full-img{
    width:auto;
    height:auto;
    max-width:100%;
    margin:0 auto;
}

.main-container{
    text-align:left;
}

#slide-1, #credit{
    z-index:9;
}
#slide-3{
    z-index:6;
    background:#AD6E1A;
    overflow:hidden;
}
#slide-4{
    z-index:7;
    overflow:hidden;
}

#kepler{
    display:block;
    z-index:8;
    position:absolute;
    bottom:-20px;
    right:10%;
}

#credit{
    text-align:left;
}

演示在 http://codepen.io/mrengy/pen/QGNbBZ

但在 Chrome 中，您可以看到如果将浏览器窗口设置得足够窄，猫会覆盖“页脚”元素中的文本。

当我在“页脚”元素上使用 Chrome 检查器时，它 shows a z-index of 9 .但是，当我单击“已计算”选项卡时，它 shows a z-index of 0 .不确定那是什么意思。

如何将“页脚”元素中的文本置于顶部？

Answer 1

你遇到的问题是默认情况下没有位置的元素是静态的，静态定位的元素没有 z-index 值。

如果将footer的位置设置为relative，则z-index会生效:

#credit {
    text-align: left;
    position: relative;
}

这是对您的示例的更新:
http://codepen.io/anon/pen/rWedLV