html - z-index 不适用于固定位置元素

Question

我设计了一个页脚，它只会在移动分辨率下固定位置。但看起来 z-index 不适用于该 div。 以下是html和CSS代码

<div class="cws_social_links-icon  animated fadeIn">
    <a href="//facebook.com" class="icon_link"><i data-font-color="#ffffff" data-bg-color="#3b5998" class="cws_fa flaticon-facebook55 fa-lg custom_colors square kill_gradient" style="color: rgb(255, 255, 255); background-color: rgb(59, 89, 152); border-color: rgb(59, 89, 152);"></i></a>
    <a href="//twitter.com" class="icon_link"><i data-font-color="#ffffff" data-bg-color="#55acee" class="cws_fa flaticon-twitter1 fa-lg custom_colors square kill_gradient" style="color: rgb(255, 255, 255); background-color: rgb(85, 172, 238); border-color: rgb(85, 172, 238);"></i></a>
    <a href="//linkedin.com" class="icon_link"><i data-font-color="#ffffff" data-bg-color="#28A6EC" class="cws_fa fa fa-linkedin fa-lg custom_colors square kill_gradient" style="color: rgb(255, 255, 255); background-color: rgb(40, 166, 236); border-color: rgb(40, 166, 236);"></i></a>
     <p></p>
</div>
<style>
    @media screen and (max-width: 479px)
    main.css?ver=4.7.2:9100
    .cws_social_links-icon {
        display: inline-block;
        vertical-align: middle;
        position: fixed;
        text-align: left;
        bottom: 0px;
        right: 20px;
        z-index: 0;
        height: 60px;
        width: 90%;
    }
</style>

example-z-index not working

请查看图片底部的社交媒体图标，它在内容下方消失了。我已经为社交媒体图标提供了 z-index。但它不起作用。

Answer 1

z-index 属性采用一个数值，其作用类似于 z 轴上的图层位置。

将首先看到具有最高 z-index 值的元素，然后是具有下一个最高值的元素，依此类推。

因此，z-index: 0 属性不会将其置于正文内容之上。尝试使用 1 或 2 作为值。 (避免使用大而高的数字，因为它更难维护)。

此外，read more about this property at MDN获取更多信息。