CSS:绝对位置不是相对于 div 定位它

Question

我试图将对话框放在 +(加号)的正下方。

这是我使用的代码:

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

在.projectMore中是绝对定位的.dialogEditProject。当我在浏览器中加载页面时，它看起来并不是绝对定位的。

这是代码，可以实时查看行为:jsfiddle

Answer 1

将此 CSS 提供给 .projectMore:

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

解释

当你给一个元素relative位置时，它就变成了absolute定位元素的边界，这样你就可以使用top, left, right, bottom 在 absolute 定位元素上相对于相对定位的父元素。 :)