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

Question

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

ID 为 "credit"
"a" 元素，id 为 "kepler"，包含猫图片
背景图片，其父级的 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中，你可以看到如果你把浏览器window设置得足够窄，猫会覆盖"footer"元素中的文本。

当我在 "footer" 元素上使用 Chrome 检查器时，它 shows a z-index of 9. However, when I click the "Computed" tab, it shows a z-index of 0。不知道那是什么意思。

如何将 "footer" 元素中的文本放在最上面？

Answer 1

您将需要添加媒体查询，然后为要检查的屏幕尺寸添加 z-index。

例如。如果在 chrome 中，您在 320x480 屏幕尺寸下进行检查，则为此屏幕尺寸添加媒体查询并在该块中添加 z-index。

@media only screen 
and (min-device-width : 320px) {
#slide-1, #credit{
    z-index:9;
}
}

Answer 2

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

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

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

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

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

z-index on an element set to 9 in css but appearing as 0 in Chrome Inspector > "Computed" value

css

z-index