菜單將頁面的其余部分向下推

Question

如何使菜單不影響下面的代碼？ 我認為position:fixed; 將解決此問題，但我不確定。

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

Answer 1

您將要添加.menu { position:absolute; top: 45px; } .menu { position:absolute; top: 45px; } .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

嘗試添加顯示：固定

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

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