时间戳

首页 > 解决方案 > z 索引多个元素

css - z 索引多个元素

问题描述

嘿伙计们，我有 3 个元素，我正在使用 z-index 和 position 属性。第一个是主导航栏（工作正常）第二个是sidenav 第三个是按钮。

按钮必须具有相对位置。 当我滚动主导航栏时，它接管了很棒的按钮！ 但侧面导航栏不是。 我确实尝试更改每个元素的 z-index。

移动导航栏是工作正常的主要导航栏。

.mobile-navbar {
  background-color: rgb(0, 0, 0);
  position: fixed;
  z-index: 1;

  width: 100%;
  display: flex;
  justify-content: space-between;
  img {
    background-color: rgba(0, 0, 0, 0.274);
  }
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      font-size: 2rem;
      color: #fff;
      margin: 5px;
      text-decoration: none;
      span {
        background-color: red;
        border-radius: 10px;
        padding: 0 3px;
      }
    }
  }
}

.side-nav {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(-100%);
  transition: 300ms ease-out;
  &-active {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgb(12, 6, 39);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
    transition: 300ms ease-out;
    button.close-nav {
      padding: 5px;
      background-color: rgb(14, 12, 12);
      color: #fff;
      border: none;
      font-size: 2rem;
      font-weight: 700;
    }

    .dynamic-links {
      height: 30%;

      button {
        padding: 5px;
        font-size: 2rem;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        border: none;
      }
      .sidenav-link {
        color: #fff;
        text-decoration: none;
        font-size: 2rem;
        margin: 0 10px;
      }
    }
    .sidenav-links {
      display: flex;
      flex-direction: column;
      height: 50%;
      .sidnav-link {
        color: #fff;
        margin: 10px 0;
        font-size: 2rem;
        text-decoration: none;
        text-align: center;
      }
    }
  }
}

我需要使用相对位置并接管侧导航栏的按钮：

 button {
      position: relative;
      z-index: 0;
      cursor: pointer;
      font-size: 1.3rem;
      padding: 10px 15px;
      border: none;
      outline: #06a821;
      border-radius: 30px;
      color: #fff;
      letter-spacing: 0.3rem;
      background: linear-gradient(
        90deg, 
        rgba(5, 116, 197, 1) 35%,
        rgba(106, 183, 239, 1) 100%
      );

      transition: ease-in-out 300ms;
      &::before {
        position: absolute;
        border: 1px solid #fff;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
        border-radius: 30px;
        content: "";
      }

标签： csssass

解决方案

只需要在活动类中添加 z-index。之前 ：

.side-nav {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(-100%);
  transition: 300ms ease-out;
  &-active {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgb(12, 6, 39);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
    transition: 300ms ease-out

后：

.side-nav {
  position: fixed;
  width: 100%;
  height: 100vh;
  transform: translateX(-100%);
  transition: 300ms ease-out;
  &-active {
    position: fixed;
  z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: rgb(12, 6, 39);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
    transition: 300ms ease-out;

推荐阅读