Question

您好我使用的是我在这里的html5画布菜单---＆gt; http://callmenick.com/_development/material-menu/

在css中，汉堡菜单设置为固定在页面的左上角。我想改变它，并能够将汉堡菜单放在我想要的任何地方。

现在我试图移除固定位置和绝对位置但是刚刚折叠了汉堡图标并使其成为一行而不是三行。

以下是我试图修复的部分的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: "";
}

有没有人知道如何能够将菜单放在我想要的任何地方。

如果你转到链接，有一个github链接包含菜单的所有文件和css。

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

我该如何解决这个问题。

Answer 1

你做

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

而不是

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

Answer 2

Position: fixed的{{1}}将元素从文档的流中取出，将其固定到特定位置的页面，以便即使在滚动时它也会跟随窗口。更改.mm-menu-toggle属性的值将允许您根据需要重新定位。

设置为position的

Position将从文档流中取出元素，并让您使用absolute，top，left等属性对其进行定位， bottom等。然而，该元素将停留在页面上的指定位置，并且在滚动时不会跟随用户的屏幕。

设置为right的

Position会将元素放回到文档的流程中，使其显示在HTML元素之后和之前，就像您拥有文档一样，并且在滚动时不会跟随用户的屏幕。然后可以使用relative重新定位它，就像大多数HTML元素一样。

示例（float）：

position: absolute

示例（.mm-menu-toggle { position: absolute; right: 10px; top: 20px; }）：

position: relative

重新定位汉堡菜单CSS

2 个答案: