CODEWITHSUNDEEP
css
Andrew
Andrew

Reputation: 6394

CSS: absolute position is not positioning it relative to the div

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

Upvotes: 0

Views: 132

Answers (3)

Jedi
Jedi

Reputation: 397

Do you have 

position: relative

in the projectDetails?

Try to look at w3schools

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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. :)

Upvotes: 5

j08691
j08691

Reputation: 207901

Set position:relative on the div .projectDetails.

jsFiddle example.

Upvotes: 2

Related Questions