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

- (void)webViewDidStartLoad:(UIWebView *)webView - (void)webViewDidFinishLoad:(UIWebView *)webView属性采用的数值类似于z-index轴上的图层位置。

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

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

另外，read more about this property at MDN了解更多信息。

Answer 2

如果没有其他css定义的上下文，z-index的行为很难评估。

您为社交媒体图标div指定了z-index为0。当它出现在您的屏幕截图中时，它们位于“背景”中。高于零的z指数（事实上，高于其他元素的z指数）将把它放在前面 - 我想，这正是你想要实现的目标。

...但不要使用高达数千的数字，以后很难维护。

Answer 3

请试试这个，

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

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

3 个答案: