Flexbox重叠的绝对定位元素

Question

我正在尝试用flexbox制作一个多语言纳维布，使用一些JS切换我不想要的元素的可见性，但是在保持绝对定位的布局时遇到了麻烦。/p>

理想情况下，我希望语言具有绝对定位，以便多语言元素可以看不见地重叠，但是应用此元素会覆盖Flexbox布局。

.language {
  position: absolute;
}

jsfiddle

function switchLanguage(lang) {
  var languageElements = document.getElementsByClassName('language')
  for (var x in languageElements) {
    if (languageElements[x].getAttribute('lang') != lang) {
      languageElements[x].style.visibility = 'hidden';
    } else {
      languageElements[x].style.visibility = 'visible';
    }
  }
}
switchLanguage('bs')

#menu {
  width: 100vw;
  position: fixed;
  top: 0px;
  text-align: center;
}
ul {
  list-style: none;
}
.container {
  display: flex;
}
.container>li {
  flex: 1;
}
@media all and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex-basis: 50%;
  }
}
@media all and (max-width: 400px) {
  .container>li {
    flex-basis: 100%;
  }
}
.language {
  z-index: auto;
  position: absolute;
}

<nav id="menu">
  <div class="language" lang="bs">
    <ul class="container">
      <li><a href="#about">O Nama</a></li>
      <li><a href="#hours">Radno Vrijeme</a></li>
      <li><a href="#map">Karta</a></li>
      <li><a href="#">Meni</a></li>
      <li onclick="switchLanguage('en')">English</li>
    </ul>
  </div>
  <div class="language" lang="en">
    <ul class="container">
      <li><a href="#about ">About Us</a></li>
      <li><a href="#hours ">Opening Hours</a></li>
      <li><a href="#map ">Map</a></li>
      <li><a href="# ">Menu</a></li>
      <li onclick="switchLanguage('bs')">Bosanski</li>
    </ul>
  </div>
</nav>

Answer 1

您需要将宽度设置为绝对位置的元素。没有该，如果空的，它会折叠成内容大小或零。还建议使用正确的偏移。

jsfiddle

.language {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

Answer 2

使用CSS类并在我使用hide类之间切换，如下所示

html：

  <nav id="menu">
    <div class="language hide" lang="bs">
      <ul class="container">
        <li><a href="#about">O Nama</a></li>
        <li><a href="#hours">Radno Vrijeme</a></li>
        <li><a href="#map">Karta</a></li>
        <li><a href="#">Meni</a></li>
        <li onclick="switchLanguage('en')">English</li>
      </ul>
    </div>
    <div class="language" lang="en">
      <ul class="container">
        <li><a href="#about ">About Us</a></li>
        <li><a href="#hours ">Opening Hours</a></li>
        <li><a href="#map ">Map</a></li>
        <li><a href="# ">Menu</a></li>
        <li onclick="switchLanguage('bs')">Bosanski</li>
      </ul>
    </div>
  </nav>

CSS：

#menu {
  width: 100vw;
  position: fixed;
  top: 0px;
  text-align: center;
}
ul {
  list-style: none;
}
.container {
  display: flex;
}
.container>li {
  flex: 1;
}
@media all and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex-basis: 50%;
  }
}
@media all and (max-width: 400px) {
  .container>li {
    flex-basis: 100%;
  }
}
.language.hide {
  display:none;
}

js：修改了JSFiddle上的JS切换类

function switchLanguage(lang) {
  var languageElements = document.getElementsByClassName('language')
  for (var x in languageElements) {
    if (languageElements[x].getAttribute('lang') != lang) {
      console.log(languageElements[x].classList);
      languageElements[x].classList.add("hide");
    } else {
      console.log(languageElements[x].classList);
      languageElements[x].classList.remove("hide");
    }
  }
}
switchLanguage('bs')

请在下面的Codepen上找到工作代码：https://codepen.io/yasirkamdar/pen/yexwox