如何用另一个固定 div 推送固定 div答案

【问题标题】：How to push Fixed div with another fixed div如何用另一个固定 div 推送固定 div
【发布时间】：2014-02-01 03:34:25
【问题描述】：

当另一个固定的右侧 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

【问题讨论】：

标签： css html responsive-design fixed

【解决方案1】：

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

在切换菜单 ($('#push, #close').click(function () {...}) 的 JS 中，还会在您的 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;
}

【讨论】：

position: fixed 不会浮动。
@MarcellFülöp 确实，但是在查看了他的代码之后，菜单切换元素本身并不固定。

【解决方案2】：

您不能与任何其他元素“推动”固定元素，因为它与任何其他元素无关。

采取另一种方法的一种方法是将菜单按钮容器的 css right: 0 更改为 left: 0（或动画，如果您愿意）。对此的提示是，如果你想交换一个元素的左右属性，你必须给另一个（被“删除”，但你不能真正删除它）auto 值。

您还可以在容器元素中将两个元素相对显示，然后移动它以实现菜单从右侧进入而按钮向左滑动的效果。

【讨论】：