具有位置的流体布局：固定导航

Question

所以我有一个流畅的布局，主体上的最小宽度为 960 像素。我有一个固定的标题，可以按预期工作，还有一个右侧的导航栏，我想在垂直滚动上保持固定......这也有效。

但是，如果我将窗口大小调整为小于 960 像素宽度，我希望右侧导航栏（位置：固定）在水平滚动条上保持在右侧，而不是覆盖内容。

#mainnav {
    width:20%;
    height:100%;
    margin-left:80%;
    position:fixed;
}

#mainhead{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:46px;
}

#contentcontain{
    margin-top:46px;
    width:80%;
}

我确信我可以使用 JS 来做到这一点，但我只是想知道如果没有 JS 是否有更简单的方法。

谢谢，

Dom

Answer 1

具有 position:fixed 的元素会从文档布局的正常流程中拉出，并且始终位于顶部，除非您为其指定 z-index 值。