jquery - 菜单锚定到最外层的 div

Question

我想知道是否可以将菜单锚定在布局中最外层的 div 之上？
这是我设置的 jsFiddle:http://jsfiddle.net/L2Deq/7/
这也是代码:
HTML—

<div id="menu">Menu 1</div>
<div id="testing">Testing 1</div>

<div id="menu-right">Menu 2</div>

<div id="boxed">
<div id="box-01" class="boxes"></div>
<div id="box-02" class="boxes"></div>
<div id="box-03" class="boxes"></div>
<div id="box-04" class="boxes"></div>
<div id="box-05" class="boxes"></div>
<div id="box-06" class="boxes"></div>
<div id="box-07" class="boxes"></div>
<div id="box-08" class="boxes"></div>
</div>

CSS—

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    left: 20px;
    top: 10px;
    position: absolute;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 100px;
    left: 128px;
    top: 10px;
    position: absolute;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    left: 20px;
    top: 30px;
    position: absolute;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}

基本上，我希望将“菜单 2”与最外面的红色框对齐。因此，当屏幕尺寸缩小时，菜单会移动 100px(红色框的宽度)，因此它始终与右侧的框对齐。希望这是有道理的，我似乎无法弄清楚如何实现这一点，不确定我是否可以用 css 实现或者可能需要 jQuery？

Answer 1

我在外面包裹了一个容器，设置了最大宽度，将布局更改为相对布局而不是绝对布局，并使用了 css Float 属性来正确定位所有内容。我很确定这不是您想要的(菜单不会移动 100 像素 block ，而是流畅地移动)，但这是 fiddle 和 CSS 更改:

http://jsfiddle.net/L2Deq/21/

#container {
    max-width: 900px;
}

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 10px;
    margin-top: -60px;
    position: relative;
    float: right;
    margin-right: 25px;
}

.clear {
    clear: both;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}