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/