css - 如何用另一个固定的 div 推送固定的 div

Question

当另一个固定的右侧 div 应该从右侧推送时，如何推送宽度为 100% 的固定顶部 div？我正在制作一个可折叠的移动菜单。它由顶部固定 div 上的按钮切换。现在，右边的固定 div 与顶部的固定 div 菜单按钮重叠。我希望这个按钮在屏幕上向左移动，以便它始终可见。我该如何做到这一点？我没有在 css 中使用固定元素进行大量工作。感谢您的帮助。

注意:通过缩小浏览器窗口，您只会看到我所说的菜单和菜单按钮。此菜单专为移动布局设计。

网站:

http://dai1.designangler.com/

CSS:

#slide-menu {
  margin-right: -250px;
  right: 0;
  top:0;
  width: 250px;
  background: #222;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 10001;
  font-family: Roboto,sans-serif;
  color: #fff;
  font-weight: 100;
  font-size: 1.5em;
}


#push{
  /* This is the div that holds the menu button */
  position: fixed;
  top: 0;
  padding: 0 1em;
  background: #366982;
  width:100%;
  display:none; 
  z-index: 10000;
}

截图说明:

菜单关闭:http://prntscr.com/2oaf82

菜单打开，按钮重叠:http://prntscr.com/2oafv4

Answer 1

你不能。固定是固定的。不过还有其他方法。这是一个:

在您切换菜单的 JS 中 ($('#push, #close').click(function () {...}) 也会在您的 body 上切换一个类 元素称为 .menu-open

$('body').toggleClass('menu-open');

并更新你的 CSS:

.menu-btn {
    float: right;
    margin-right: 2em;
}
.menu-open .menu-btn {
    float: left;
    margin-right: 0;
    margin-left: 2em;
}