javascript - 如何在屏幕中间有一个 float 菜单

Question

如果没有 javascript 的帮助，这可能吗？

通常我们在页面顶部有菜单栏 - 我们将它们作为 body 的子项放置，然后绝对定位它们，例如顶部:10px；右:10px;.

如果我们想要实现相同的目标，但作为页面下方的上下文菜单怎么办？

我已经启动了一个 fiddle 来提供一个想法 - 这里没有定位，我们只有 overflow: visible 的默认值。

我不能绝对定位它，因为我不知道 x,y，因为它之前的内容是动态的。

我能想到的唯一方法是沿着顶部导航栏的传统路线走下去，并使用 javascript 找到它的容器的 x、y 并将其定位在那里。但是我需要管理，如果它之前的内容发生变化，那么它的位置也需要改变。

有谁知道“固定”jquery 方法。还是用纯 CSS 更好地实现它？

谢谢

这是我的简陋 fiddle - 单击“一个”http://jsfiddle.net/hHR23/1/

Answer 1

我想你想要这个，但我不确定你的描述:

http://jsfiddle.net/samih/hHR23/2/

注意这一点:

.section {
    height: 58px;
    background-color: yellow;
    position: relative;
}

还有这个:

.menu {
    position: absolute;

}

现在您的菜单将跟随“动态”页面，因为绝对位置是相对于“position:relative”容器的。