div-tooltip - same on stackoverflow

Question

if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity * privileges * logout etc. how can i make it? i maked something:

<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>

sample image: http://img231.imageshack.us/img231/3885/threej.png

1. default
2. click for blue div
3. how can i it make?

Answer 1

If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:

You'll want to read up on CSS Positioning . In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;

So:

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

This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE . The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.

Answer 2

If you want to position elements on top of each other, use position : relative or absolute . If you want it to stick to a position on your window regardless of if you scroll, use fixed .

After defining the position , you can define top , right , bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:

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

to your #THREE elements CSS, like here: http://jsfiddle.net/niklasvh/Axjgf/