当菜单向下推动页面的其余部分

Question

如何让我的菜单不影响它下面的代码呢？我认为position:fixed;会解决这个问题，但我不确定。

jsFiddle：http://jsfiddle.net/chaddly/u9EEt/#base

Answer 1

您将要添加.menu { position:absolute; top: 45px; }。

position:absolute属性将从布局流程中取出子菜单，使其显示在以下文本上方。子菜单将不需要页面上的任何“空格”。 top:45px将正确定位子菜单。

您还需要将子菜单的父元素设置为position:relative，以确保子菜单元素相对于其父元素定位。在这种情况下，这将是45px从顶部开始！

小提琴：http://jsfiddle.net/u9EEt/8/

Answer 2

一种方法是使用菜单的绝对位置：

position:absolute;
top:55px;
right:8px;
z-index:9999;

以下是一个示例：jsFiddle

Answer 3

我使用了position:absolute。 结果如下：http://jsfiddle.net/u9EEt/4/

Answer 4

尝试添加display：fixed

.menu {
    float: right;
    width: 200px;
    height: auto;
    position: fixed;
}

http://jsfiddle.net/u9EEt/2/