如何让我的导航栏加载到元素动画之上答案

【问题标题】：How to make my navbar load above my element's animation如何让我的导航栏加载到元素动画之上
【发布时间】：2018-07-20 15:27:14
【问题描述】：

我在开发我的作品集时遇到了问题。我做了一个固定的导航栏，它开始透明，滚动后变为黑色背景。我的问题是当我在悬停后添加动画时，部分中有一个框，它在 X 和 Y 中缩放，并出现在我制作的导航栏上方。我希望导航栏具有最高优先级我试过 z_index 但它没有用

这是导航栏的CSS

.navbar-custom{
    position: fixed;
    top: 0px;
    width: 100%;
    height: auto;
    background-color: rgb(3, 3, 3, 0);
    display: flex;
    flex-direction: row-reverse;
    padding-right: 50px;
}

这是盒子的css

.skill{
    text-align: center;
    width: 16.6%;
    height: 40vh;
    overflow: hidden;
}
.skill:hover{
    animation-name: skillbox;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes skillbox{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.1);
    }
}

【问题讨论】：

仅供参考，sarafi 不会正确渲染 RGB 不透明度，除非您使用 rgba()。不是很多人在桌面上使用 safari，但很多 iPhone 用户默认使用 safari。我意识到这与您的问题无关，但仔细查看，希望我能帮您省去我对此的挫败感。

标签： html css css-animations navbar fixed

【解决方案1】：

z-index 是解决方案，但是 z-index 不适用于静态元素，这是元素的默认位置。当您尝试 z-index 解决方案时，您可能忘记将 .skill 元素设置为相对位置。

.navbar-custom{
    position: fixed;
    top: 0px;
    width: 100%;
    height: auto;
    background-color: blue;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 50px;
    height:50px;
    // This was added. The other styles I added were just for visualisation purposes.
    z-index:2;
}
.skill{
    text-align: center;
    width: 16.6%;
    height: 40vh;
    overflow: hidden;
    background:pink;
    margin-top:50px;
    // This was added. The other styles I added were just for visualisation purposes.
    position:relative;
    z-index:1;
}
.skill:hover{
    animation-name: skillbox;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes skillbox{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.1);
    }
}

<div class="navbar-custom"></div>
<div class="skill"></div>

【讨论】：