当另一个固定的右侧 div 应该从右侧推送时,如何推送宽度为 100% 的固定顶部 div?我正在制作一个可折叠的移动菜单。它由顶部固定 div 上的按钮切换。现在,右边的固定 div 与顶部的固定 div 菜单按钮重叠。我希望这个按钮在屏幕上向左移动,以便它始终可见。我该如何做到这一点?我没有在 css 中使用固定元素进行大量工作。感谢您的帮助。
注意:通过缩小浏览器窗口,您只会看到我所说的菜单和菜单按钮。此菜单专为移动布局设计。
网站:
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
最佳答案
你不能。固定是固定的。不过还有其他方法。这是一个:
在您切换菜单的 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;
}
关于css - 如何用另一个固定的 div 推送固定的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21487709/