如何修复 Bootstrap 中的 z-index 问题？

Question

我正在设计this landing using Bootstrap and my own code. As you can see the main menu it's not showing all the content above the HTML. This is the CSS。

如何解决这个问题？我认为这是一个 z-index 问题。我说得对吗？

这里是 original menu code.

谢谢

这是 css 菜单代码的一部分：

/*----------ESTILOS MENU -----------*/
  .menuBtn {
    height: 30px;
    width: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 101;
  }
  .menuBtn > span {
    background-color: var(--color-primario);
    height: var(--altura-linea);
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -15px;
    transition: height 100ms;
  }
  .menuBtn > span:after,
  .menuBtn > span:before {
    content: '';
    background-color: var(--color-primario);
    height: var(--altura-linea);
    width: 100%;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    transition: all 200ms;
  }
  .menuBtn > span:after {
    top: -7px;
  }
  .menuBtn > span:before {
    bottom: -7px;
  }
  .menuBtn.act > span {
    height: 0;
  }
  .menuBtn.act > span:after,
  .menuBtn.act > span:before {
    background-color: #008877;
    top: 1px;
  }
  .menuBtn.act > span:after {
    transform: rotate(45deg);
  }
  .menuBtn.act > span:before {
    transform: rotate(-45deg);
  }
  /* main menu block */
  .mainMenu {
    background-color: var(--color-blanco);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0);
  }
  .mainMenu.act {
    opacity: 1;
    transform: scale(1);
  }
  .mainMenu.act ul li {
    opacity: 1;
    transform: translateX(0);
  }
  .mainMenu ul {
    display: table-cell;
    vertical-align: middle;
  }
  .mainMenu li {
    padding: 8px 0;
    transition: all 400ms 510ms;
    opacity: 0;
  }
  .mainMenu li:nth-child(odd) {
    transform: translateX(30%);
  }
  .mainMenu li:nth-child(even) {
    transform: translateX(-30%);
  }
  .mainMenu li:last-child {
    transform: none;
  }
  .mainMenu a {
    color: #19b698;
    display: inline-block;
    font-size: 18px;
  }
  .mainMenu a.suBtn {
    color: var(--color-blanco);
  }

  .act{
    background-color: red;
  }

Answer 1

请像这样更新您的css

/*----------ESTILOS MENU -----------*/
      .menuBtn {
        height: 30px;
        width: 30px;
        position: absolute;
        right: 20px;
        top: 10px;
        z-index: 101;
      }
      .menuBtn > span {
        background-color: var(--color-primario);
        height: var(--altura-linea);
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -1px 0 0 -15px;
        transition: height 100ms;
      }
      .menuBtn > span:after,
      .menuBtn > span:before {
        content: '';
        background-color: var(--color-primario);
        height: var(--altura-linea);
        width: 100%;
        position: absolute;
        left: 50%;
        margin-left: -15px;
        transition: all 200ms;
      }
      .menuBtn > span:after {
        top: -7px;
      }
      .menuBtn > span:before {
        bottom: -7px;
      }
      .menuBtn.act > span {
        height: 0;
      }
      .menuBtn.act > span:after,
      .menuBtn.act > span:before {
        background-color: #008877;
        top: 1px;
      }
      .menuBtn.act > span:after {
        transform: rotate(45deg);
      }
      .menuBtn.act > span:before {
        transform: rotate(-45deg);
      }
      /* main menu block */
      .mainMenu {
        background-color: var(--color-blanco);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
        opacity: 0;
        transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform: scale(0);
      }
      .mainMenu.act {
        opacity: 1;
        transform: scale(1);
      }
      .mainMenu.act ul li {
        opacity: 1;
        transform: translateX(0);
      }
      .mainMenu ul {
        display: table-cell;
        vertical-align: middle;
      }
      .mainMenu li {
        padding: 8px 0;
        transition: all 400ms 510ms;
        opacity: 0;
      }
      .mainMenu li:nth-child(odd) {
        transform: translateX(30%);
      }
      .mainMenu li:nth-child(even) {
        transform: translateX(-30%);
      }
      .mainMenu li:last-child {
        transform: none;
      }
      .mainMenu a {
        color: #19b698;
        display: inline-block;
        font-size: 18px;
      }
      .mainMenu a.suBtn {
        color: var(--color-blanco);
      }
    
      .act{
        background-color: red;
      }

如何修复 Bootstrap 中的 z-index 问题？

How to fix a z-index issue in Bootstrap?

html

javascript

css

performance

z-index