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

默认
点击蓝色div
我该怎么做？

Answer 1

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

您需要阅读CSS Positioning。简而言之，要使黄色div坐在这样的所有内容上，它需要取position: absolute;它将与其最近的具有定位的祖先相对定位，因此设置#ONE到position: relative;

所以：

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

这会使#THREE的左上角移动到#ONE的最右边和四分之一处。{{1}}。绝对定位也将其从文档流中取出，使其与其他元素重叠。

Answer 2

如果您想将元素放在彼此之上，请使用position：relative或absolute。如果您希望它粘贴在窗口上的某个位置，无论您是否滚动，请使用fixed。

定义position后，您可以定义top，right，bottom和left，将其定位到您想要的位置。要模拟示例中的第3个图像，可以添加：

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

到你的#THREE元素CSS，就像这里： http://jsfiddle.net/niklasvh/Axjgf/

div-tooltip - 在stackoverflow上相同

2 个答案: