CSS，绝对位于其他层的顶部，水平居中和固定宽度

Question

首先，我想知道是否有人甚至可以十倍快地说出问题标题。

这应该很简单。我一直在谷歌上搜索，虽然有很多教程，但我总是难以掌握这个想法。我甚至看过其他一些似乎相关的SO问题，但我无法让它们发挥作用。

我有3层。 header，menu，body。当然，真正的应用程序要复杂得多。但是为了这个问题，这足够了数据。

整个页面本身填充100% width，但每个部分中的内容将固定为1024px宽。使用重新知道的margin: 0 auto;样式很容易做到这一点。所以这不是问题。

这是诀窍。中间层，menu。我希望菜单重叠标题和内容之间的边框。现在，这样做也不是太难。我只是绝对定位菜单并按100px向下踢，以使其垂直对齐。

我似乎无法实现的是horizontal块的1024px对齐。我已经包含了一个轻小提琴和一个预期输出的图像（当心，jsfiddle的默认预览窗格不是1024px宽，所以它看起来像是乍一看）

更新

按照this post的说明，我能够让它发挥作用。但它只能在Chrome中运行。

http://jsfiddle.net/dE8xE/

期望的输出（为强调和区分而夸大的颜色）

Answer 1

您可以使用百分比边距和宽度来达到您想要的效果吗？将z-index设置为大于其他部分的z-index将使其浮动。示例：http://jsfiddle.net/6xCfU/

margin: 10% 0 0 10%;
width: 80%;
z-index; 100;

Answer 2

#site-menu {
    background-color: #fff;
    height: 64px;
    position: absolute;
    top: 100px;
    display: block;
    width: 1024px;

/ *当你有固定的宽度* /

时，一切都很简单

    left: 50%;
    margin-left: -512px;
}