如何避免弹出菜单移动页面内的图表等其他元素？

问题描述 #

现有多图表展示页面，已配置可跳转至指定图表的侧边菜单，弹出菜单的实际运行效果不符合预期：

• 页面宽度大于820px时，效果符合要求；
• 当@media screen and (max-width: 820px)媒体查询生效时，期望菜单弹出后悬浮在图表上方，但现有代码会触发图表位置偏移。
  已尝试为canvas元素设置relative、absolute、fixed定位，图表偏移问题依然存在。

修复方案 #

在移动端媒体查询内的.toggleSidebar #sidebar选择器样式中，添加position: absolute;属性即可解决问题。

原理解释 #

默认布局下sidebar为浮动元素，属于正常文档流的一部分，弹出显示时会占用页面空间，将后续的main区域（含图表）挤到下方，导致位置偏移。添加position: absolute后sidebar会脱离正常文档流，不再占用页面排版空间，配合已设置的z-index: 999属性，可直接悬浮在现有页面内容上方，不会影响图表的原有位置。

相关代码 #

JavaScript逻辑 #

document.querySelector("#MenuToggle").addEventListener('click', function(event) {
  document.body.classList.toggle('toggleSidebar');
});

const myChart = new Chart(
  document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        borderWidth: 1,
      }]
    }
  }
);

CSS样式 #

#sidebar {
  float: left;
  position: sticky;
  top: 60px;
}

#main {
  margin-left: 320px;
}

#header {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 40px;
}

#wrapall {
  padding-top: 60px
}

.chart-container {
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  margin: auto
}

.toggleSidebar #sidebar {
  display: none;
}

.toggleSidebar #main {
  margin-left: 0;
}

@media screen and (max-width: 820px) {
  #MobileMenuToggle {
    display: inline-flex;
  }
  #sidebar {
    display: none;
  }
  .toggleSidebar #sidebar {
    display: initial;
    z-index: 999;
    position: absolute; /* 新增的修复代码 */
  }
  #main {
    margin-left: 0;
  }
}

HTML结构 #

<head>
  <!-- <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css"> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
  <header>
    <div id="header">
      <div class="header" id="MenuToggle">click me</div>
    </div>
  </header>
  <div id="wrapall">
    <div id="sidebar">
      <div id="sidebarContent">
        my insane menu
        <aside>
          <div>graph1</div>
          <div>graph2</div>
          <div>graph3</div>
          <div>graph4</div>
          <div>graph5</div>
          <div>graph6</div>
          <div>graph7</div>
          <div>graph8</div>
        </aside>
      </div>
    </div>
    <div id="main">
      <section id="page">
        <main>
          <article>
            insane graph 1
            <div class="chart-container">
              <canvas class="chart" id="myChart"></canvas>
            </div>
          </article>
          <article>
            insane graph 2
          </article>
          <article>
            insane graph 3
          </article>
        </main>
      </section>
    </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Fabien