Flexbox 重叠绝对定位元素

Question

我正在尝试使用 flexbox 制作多语言导航栏，使用一些 JS 来切换我不想要的元素的可见性，但是在保留绝对定位的布局时遇到了麻烦。

理想情况下，我希望 .language 具有绝对定位，以便多语言元素可以无形地重叠，但应用此设置会覆盖 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类的blocks之间切换如下图

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