我的 CSS 中的 Z-Index 问题

Question

所以我正在努力为自己创建一个新的投资组合，但在尝试以某种方式设置我的社交图标样式时，我遇到了 CSS 问题。我想要的效果可以在这里看到：My Social Icons Demo. However, if you view my portfolio, here，你可以看到我并没有得到同样的效果（注意：我的社交图标位于页面的左上角和左下角） .我似乎无法让我的社交图标图像后面的白色背景过渡进来。我认为这可能与 z-index 错误有关，该错误可能与我的投资组合页面上的其他内容冲突但截至目前我是卡住了..有什么想法吗？？将不胜感激！代码如下：

HTML

<!-- SOCIAL -->
                    <div class="col-sm-4 text-left">
                        <div class="social-icons">
                            <a href="https://github.com/jlquaccia" target="_blank" class="me-transparent-btn">
                                <img src="./img/icons/github-6-48.png" alt="Github">
                            </a>
                            <a href="https://www.linkedin.com/profile/view?id=227782654&amp;trk=nav_responsive_tab_profile" target="_blank" class="me-transparent-btn">
                                <img src="./img/icons/linkedin-48.png" alt="LinkedIn">
                            </a>
                            <a href="http://instagram.com/jquatchaa" target="_blank" class="me-transparent-btn">
                                <img src="./img/icons/twitter-48.png" alt="Instagram">
                            </a>
                        </div>
                    </div>

CSS

.hero {
    background-image: url(../img/star_trails_2_large.jpg);
    background-attachment: fixed;
    background-size: cover;
}

.social-icons {
    margin-top: 41px;

    a {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        margin: 5px;
        padding: 0;
        position: relative;
        cursor: pointer;

        img {
            -webkit-filter: invert(100%);
            -moz-filter: invert(100%);
            -ms-filter: invert(100%);
            -o-filter: invert(100%);
            filter: invert(100%);
            vertical-align: bottom;
            display: inline-block;
            -webkit-transform: scale(.7);
            -moz-transform: scale(.7);
            -ms-transform: scale(.7);
            -o-transform: scale(.7);
            transform: scale(.7);
            -webkit-transition: all 400ms ease;
            -moz-transition: all 400ms ease;
            -ms-transition: all 400ms ease;
            -o-transition: all 400ms ease;
            transition: all 400ms ease;
        }

        &:hover img {
            -webkit-filter: invert(0%);
            -moz-filter: invert(0%);
            -ms-filter: invert(0%);
            -o-filter: invert(0%);
            filter: invert(0%);
            -webkit-transform: scale(.8);
            -moz-transform: scale(.8);
            -ms-transform: scale(.8);
            -o-transform: scale(.8);
            transform: scale(.8);
        }

        &:after {
            content: '';
            background: #fff;
            position: absolute;
            width: 0;
            height: 103%;
            opacity: .5;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            left: 50%;
            top: 50%;
            z-index: -1;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }

        &:hover:after {
            opacity: 1;
            width: 105%;
        }
    }
}

.no_margin {
    margin: 50px 0;
}

.img-responsive-center {
    display: inline-block;
    padding-top: 75px;
}

.inner {
    padding-bottom: 100px;

    span {
        color: #EF3D33;
    }
}

.text-center {
    h2 {
        color: white;
    }
}

.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@media (max-width: 767px) {
    .social {
        display: none;
    }

    .img-responsive-center {
        padding-top: 100px;
    }
}

.down-btn {
    width: 60px;
    height: 60px;
    background-color: $down-btn-bg;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

    &:hover,
    &:focus {
        background-color: $down-btn-hover-focus;
        color: #fff;
    }
}

.down-btn-padding {
    padding-bottom: 80px;
}

Answer 1

添加到您的 div.social-icons position:relative; z-index:1;，这应该可以解决您的问题。

我的 CSS 中的 Z-Index 问题

Z-Index issue in my CSS

html

css

sass

z-index