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相对于所述相对定位的父定位元素.:)