Z索引不適用於固定位置元素

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不起作用

請查看圖片底部的社交媒體圖標，它在內容下方消失了。我給社交媒體圖標指定了z-index。但是它不起作用。

Answer 1

z-index屬性采用一個數值，其作用類似於z軸上的圖層位置。

z-index值最高的元素將首先顯示，然后是第二高的元素，依此類推。

因此， z-index: 0屬性不會將其置於您的身體內容之上。 嘗試使用1或2作為值。 （避免使用較大的數字，因為它很難維護）。

另外， 請在MDN上閱讀有關此屬性的更多信息。

Answer 2

如果沒有其他css定義的上下文，則很難評估z索引的行為。

您為社交媒體圖標div分配了0的z-index。 當它出現在屏幕截圖中時，它們位於“背景”中。 高於零的z索引（實際上高於其他元素的z索引）將把它放在前面-我想這就是您要實現的目標。

...但是不要使用高達數千的數字，以后很難維護。

Answer 3

請嘗試一下

.cws_social_links-icon {z-index: 999999;}