HTML/CSS3 - 我在导航栏中添加了一个形状，它弄乱了对齐方式或我的包装器

Question

所以我开始摆弄响应式 html。但无论如何，这不是真正的问题。问题是在我添加了这个平行四边形之后，它弄乱了我的 wrapper 的内容。我尝试使用 z-index 来实现它，以便导航栏出现在包装器上，但是当我将包装器设置为相对时它不起作用，当我将它设置为绝对/固定和 z-index -1 时它起作用了。我只是想让我的包装器在中心对齐，同时在导航栏中具有平行四边形形状。因为现在，我的 2 列布局因为形状而被弄乱了。(我不太擅长解释，但如果你在 jsfiddle 上查看我的网站，我想你会明白的)谢谢!

http://jsfiddle.net/RgKaQ/

这是我试过的东西

nav {
    height: 40px;
    width: 100%;
    background: #33FF00;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #339900;
    z-index : 1;

}
.wrapper {
    width: 800px;
    margin: 0 auto;
       /* position: relative; doesn't work*/
        position: fixed; /*works but it makes it not aligned in the center*/
    z-index: -1;
}

Answer 1

id #swank(高于导航)导致了问题。使用position:absolute；用于导航并向 .wrapper 添加边距。像这样。 http://jsfiddle.net/RgKaQ/4/

nav {
position:absolute;
top: 0;
}
.wrapper {
margin: 40px auto 0 auto;
overflow:auto;
}