如何将菜单固定在左上角，设计草率

Question

我想在我的网站(http://motiongiraffx.com/)上做这样的东西(http://www.awesomescreenshot.com/image/442354/edb8d5ee19e54e29b50ae2e14b1b9156)。

菜单div必须固定在滚动上，我尝试了这个CSS

.menu-space {
    width: 100%;
    height: 5em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    overflow: hidden;
    -o-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.menu-icon {
transform: skewY(10deg);
-webkit-transform: skewY(10deg);
    }

但是菜单不会到顶角，我失去了那些样式的菜单图标。

这是我的HTML:

<div class="menu-space">
            <span class="menu-icon" style="display: none;"><img src="http://motiongiraffx.com/wp-content/themes/motiongiraffx/images/menu-icon.png" id="nav-icon" onclick="changeImage()" alt="Menu icon"></span>
        </div>

我看到的问题是宽度:100%，当我删除它，我得到了菜单空间在右上角，但我想用白色覆盖所有的空间。我怎样才能让它正常工作?

Answer 1

您可能应该使用possition:absolute;固定会一直在你的浏览器窗口