如何防止我的菜单移动页面中的其他元素？答案

【问题标题】：How can I keep my menu from moving other elements in the page?如何防止我的菜单移动页面中的其他元素？
【发布时间】：2021-12-12 23:19:28
【问题描述】：

我有一个显示一些图表的页面，并且我已经构建了一个菜单来跳转到页面上的精确图表。

我想设置一个弹出菜单，但行为不符合预期。

如果宽度 > 820 像素，我的行为还可以。
如果@media screen 和（最大宽度：820px），我希望菜单出现在图表上方。但我的代码移动了图表。

我已经尝试过相对、绝对、固定的画布，但它总是移动。有什么想法吗？

编辑：由 Gabriel 解决，见下文。需要添加：位置：绝对；在 .toggleSidebar #sidebar

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,
      }]
    }
  }
);

#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;
  }
  #main {
    margin-left: 0;
  }
}

<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>

【问题讨论】：

你试过` .toggleSidebar #sidebar { display: initial; z指数：999；位置：绝对；背景：rebeccapurple； }` 在你的@media screen and (max-width: 820px) { codepen.io/wyzix33/pen/VwzWvWg
是的，完全正确！非常感谢！

标签： javascript css flexbox chart.js

【解决方案1】：

如果您想要一个反应式侧边菜单，请确保您适当地调整。

如果您想链接到片段 ID，请确保添加指向部分 ID 的锚点。

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,
      }]
    }
  }
);

#header {
  display: flex;
  align-items: center;
}

#wrapall {
  display: flex;
  background: red;
}

#sidebar {
  display: flex;
  background: green;
  padding: 0.5em;
}

#main {
  display: flex;
  padding: 0.5em;
}

.chart-container {
  background: #FFF;
}

.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;
  }
  #main {
    margin-left: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<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><a href="#graph-1">graph1</a></div>
        <div><a href="#graph-2">graph2</a></div>
        <div><a href="#graph-3">graph3</a></div>
        <div><a href="#graph-4">graph4</a></div>
        <div><a href="#graph-5">graph5</a></div>
        <div><a href="#graph-6">graph6</a></div>
        <div><a href="#graph-7">graph7</a></div>
        <div><a href="#graph-8">graph8</a></div>
      </aside>
    </div>
  </div>
  <div id="main">
    <section id="page">
      <main>
        <article id="graph-1">
          insane graph 1
          <div class="chart-container">
            <canvas class="chart" id="myChart"></canvas>
          </div>
        </article>
        <article id="graph-2">
          insane graph 2
        </article>
        <article id="graph-3">
          insane graph 3
        </article>
      </main>
    </section>
  </div>
</div>

【讨论】：

很抱歉寻求帮助，但这不是我所期望的行为。 Gabriel 解决了这个问题，谢谢！