重新定位汉堡菜单CSS

Question

你好我使用我来到这里--->http://callmenick.com/_development/material-menu/

在汉堡菜单设置为固定在页面左上角的CSS的HTML5画布关闭菜单。我想改变这一点，并能够将汉堡菜单放在任何我想要的地方。

现在我试图删除固定的位置和绝对位置，但刚刚倒塌了汉堡包图标，并使其成为一条线而不是三条。

这是我试图修复的部分的html。

.mm-menu-toggle { 
position: fixed; 
top: 12px; 
left: 12px; 
z-index: 20; 
width: 24px; 
height: 18px; 
background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 
background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px); 
font-size: 0; 

} 

.mm-menu-toggle::before, 
.mm-menu-toggle::after { 
position: absolute; 
left: 0; 
width: 100%; 
height: 4px; 
background-color: #212121; 
content: ""; 
} 

有没有人有任何想法，我怎么能够实现能够将菜单放在任何我想要的地方。

如果你去链接有关于菜单的所有文件和CSS的github链接。

这是我的意思的图像。顶部是菜单的外观。但是当我从css拿走position:fixed;和position:absolute;时，底部的图片就是给出的内容。

我该如何解决这个问题。

Answer 1

你做

.mm-menu-toggle { 
    position: absolute; 
} 

，而不是

.mm-menu-toggle { 
    position: fixed; 
} 

Answer 2

的.mm-menu-togglePosition: fixed需要的元素进行文档的流程，使其滚动时遵循的窗口，即使它在一定的位置固定功能的页面。更改position属性的值将允许您根据需要重新定位它。

Position设置为absolute从文档的流动中取出元素，让您使用属性，如top，left，bottom，right等元素将然而，留在页面上指定位置放置它，并不会跟随用户的屏幕滚动时。

Position设置为relative将使元素返回到文档的流程使其显得之后和在HTML元素，就像你拥有了它你的文档，并在滚动时不会跟随用户的屏幕上。就像大多数HTML元素一样，它可以使用float等来重新定位。

实施例（position: absolute）：

.mm-menu-toggle { 
    position: absolute; 
    right: 10px; 
    top: 20px; 
} 

实施例（position: relative）：

.mm-menu-toggle { 
    position: relative; 
    float: right; 
    margin-top: 20px; 
}