菜单锚定到最外面的分区

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像素块，而是流畅地移动)，但这是小提琴和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;
}      

Answer 2

要以与框的换行间隔匹配的间隔对齐菜单，您需要使用媒体查询或javascript。我建议使用jQuery，因为它可以在不重写所有媒体查询断点的情况下为您提供最大的灵活性来更改框大小。

下面是一个片段，我认为它可以呈现您想要的结果。

$(document).ready(function() {
// Position the menu on document ready.
positionMenu();
// Bind it to run when the window resizes
$(window).resize(function(){
positionMenu();
});
});
function positionMenu() {
// Get the top-offset of the first box.
var toprowoffset = $('.boxes:first').offset().top;
// All the boxes with the same top-offset is in the top row - add class top to them.
$('.boxes').each(function(){
$(this).toggleClass('top',$(this).offset().top == toprowoffset);
});
// The last box in the top row is the one we want to align to.
var alignbox = $('.boxes.top:last');
// Calculate and set the right margin for the menu using the alignbox position.
var marginright = $(document).width() - alignbox.position().left - alignbox.width();
$('#menu-right').css('margin-right',marginright);
}​

这里有一个jsfiddle链接。

Answer 3

您可以将第二个菜单设置为框4的子菜单。将框设置为位置：相对，然后通过给它一个负顶部将菜单2绝对定位在框4上方。

查看你的小提琴版本20

编辑：

使用容器div对STLRick的解决方案进行快速而肮脏的修改将产生重用，我认为您可以使用它。

基本上，通过将整个组件包装在一个容器中，然后使menu2相对于相对容器是绝对的，您可以将menu2绝对地定位在所述容器的右上角。只要你的布局不改变菜单的位置和方块的位置，它就应该总是在右上角。

#container {
max-width: 900px;
position relative;
}
#menu-right {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
top: 10px;
right:120px;
position: absolute;  
}

http://jsfiddle.net/L2Deq/41/

这真的很近，但在窗口宽度上有一些斑点，导致盒子是错误的，它们是非常小的斑点(2-5个像素)

http://jsfiddle.net/L2Deq/60/

甚至更接近：

http://jsfiddle.net/gL22f/5/