div-tooltip-在stackoverflow上相同

Question

如果我将鼠标悬停在首页上stackoverflow上的昵称上，从而向我显示具有*活动*特权*注销等新菜单，我该如何做？ 我做了一些事情：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">

#ONE {
    background-color: #888;
    width: 500px;
    height: 500px;
}
#TWO {
    background-color: blue;
    width: 50px;
    height: 50px;
}
#THREE {
    background-color: yellow;
    width: 200px;
    height: 200px;
    display: none;
}
#four {
    background-color: red;
    width: 200px;
    height: 200px;
}

</style>
<script type="text/javascript">

    $(document).ready(
    function()
    {
        $("#TWO").click(
        function()
        {
            $("#THREE").toggle();
        });
    });
</script>

<div id="ONE">
    <div id="TWO">
    </div>

    <div id="four">
    </div>

    <div id="THREE">
    </div>
</div>

样本图片： http : //img231.imageshack.us/img231/3885/threej.png

1. 默认
2. 点击查看蓝色div
3. 我怎么做？

Answer 1

如果我理解正确，您会问，如何使黄色div出现在蓝色的旁边，就像您在第三个模型中看到的那样？ 如果是这样，那么：

您需要阅读CSS定位 。 简而言之，要使黄色div位于类似的所有内容上，就需要采取以下position: absolute; 它将相对于具有定位的最近祖先进行定位，因此将#ONE设置为position: relative;

所以：

#ONE {
  position: relative;
}
#THREE {
  position: absolute;
  left: 100%;
  top: 25%;
}

这将使#THREE移动到#THREE的最右端和四分之一的#ONE 。 绝对定位还将其从文档流中移出，从而使其与其他元素重叠。

Answer 2

如果要将元素放置在彼此的顶部，请使用position ： relative或absolute 。 如果您希望它固定在窗口上的某个位置，而不管您是否滚动，请使用fixed 。

定义position ，您可以定义top ， right ， bottom和left以将其定位在所需位置。 为了模拟示例中的第三张图片，您可以添加：

position:relative;
top: -220px;
left:50px;

到您的#THREE元素CSS，例如： http : //jsfiddle.net/niklasvh/Axjgf/