宽度减小时如何获得重叠效果？

Question

我模仿一个网站：https://open.weixin.qq.com/

如果我减少浏览器的宽度，您会看到重叠是我的要求。

但是在我减少浏览器宽度的项目中，我会得到这种令人厌烦的效果：

---

我的代码如下，图片无法显示，但这不是重点：

.header {
    width: 100%;
    height: 68px;
    background-color: #363636;
  }

  .container {
    margin-left: 40px;
    margin-right: 40px;
  }

  .container > div {
    display: inline-block;
  }

  .logo {
    height: 100%;
    width: 240px;
  }

  .logo img {
    width: 100%;
    height: 100%;
  }
  
  .nav {
    display: inline-block;

  }

  .nav li {
    width: 96px;
    height: 100%;
    color: #afafaf;
    line-height: 68px;
    float: left;
  }

  .nav li :hover {
    color: #fff;
    text-align: center;
  }

  .nav .selected {
    color: #fff;
  }

  .right-buttons {
    float: right;
  }

  .login-logout {
    float: right;
    display: inline-block;
    height: 68px;
    color: #ffffff;
    line-height: 68px;
  }

  .qrcode {
    float: right;
    display: inline-block;
    width: 68px;
    height: 68px;
    align-content: center;
    line-height: 68px;
  }

  .qrcode img {
    line-height: 68px;
    width: 14px;
    height: 14px;
  }

<div class="header">
    <div class="container">
      <div class="logo">
        <img src="../../assets/img/common/logo.png">
      </div>
      <ul class="nav">
        <li class="nav-item selected">首页</li>
        <li class="nav-item">数据中心</li>
      </ul>
      <div class="right-buttons">
        <div class="login-logout">
          <button>登录/注册</button>
        </div>
        <div class="qrcode">
          <img src="../../assets/img/home/little-qrcode.png">
        </div>
      </div>
    </div>
  </div>

我怎样才能获得上层效果？

Answer 1

据我所知，你需要右键div与导航ul重叠，而不是去下一行。

将“position：absolute”和“right：0”应用于右键而不是“float：right”。

但是在较小的宽度中，重叠会使用户感到困惑。因此，您可以更好地响应所有设备。