Question

I am trying to position a dialog box right under a + (plus) sign.

This is the code I am using:

<div class="container"><div class="projectsContainer">
<div class="sectionTitle">Projects</div>
<div class="project-items">

<div class="project-item">
    <div class="projectTitle"><a href="#">Product Management Tool</a></div>
    <div class="projectDetails">
        <div class="projectCompletion">
            <div class="projectProgressed"></div>
        </div>
        <div class="projectMore"><img src="/images/add_button_shadow_blue.png">

        <div class="dialogContainer dialogEditProject"><div class="dialog editProjectDialog"><ul><li id="editProject">Edit</li><li id="removeProject">Remove</li></ul></div></div>

        </div>
    </div>
    <div class="clearBoth"></div>

    <div class="projectDescription">
    No description    </div>
</div>

</div>
</div></div>​  

In .projectMore is .dialogEditProject that is absolute positioned. When I load the page in the browser is looks like it is not absolute positioned to it.

Here is the code, to see the behavior live: jsfiddle

Answer 1

Give this CSS to .projectMore:

.projectMore {position: relative;}
.dialogEditProject {position: absolute; top: X; left: Y;} /* X and Y relative to .projectmore */

Explanation

When you give an element relative position, it becomes the boundary of the absolute positioned elements, so that you can use top, left, right, bottom on the absolute positioned element with respect to the relatively positioned parent. 🙂