元素上的 z-index 在 css 中设置为 9，但在 Chrome Inspector >“Computed”值中显示为 0答案

【问题标题】：z-index on an element set to 9 in css but appearing as 0 in Chrome Inspector > "Computed" value元素上的 z-index 在 css 中设置为 9，但在 Chrome Inspector >“Computed”值中显示为 0
【发布时间】：2017-03-26 08:56:02
【问题描述】：

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

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 中，你可以看到如果你让浏览器窗口足够窄，猫会与“footer”元素中的文本重叠。

当我在“页脚”元素上使用 Chrome 检查器时，它是shows a z-index of 9。但是，当我单击“计算”选项卡时，它是shows a z-index of 0。不知道这意味着什么。

如何让“页脚”元素中的文本叠加到顶部？

【问题讨论】：

标签： css z-index

【解决方案1】：

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

例如。如果在 chrome 中您在屏幕尺寸 320x480 上检查此内容，则添加此屏幕尺寸的媒体查询并在该块中添加 z-index。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：