0

我正在尝试将一个对话框放置在 +（加号）符号的正下方。

这是我正在使用的代码： 

<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是.dialogEditProject绝对定位的。当我在浏览器中加载页面时，它看起来不是绝对定位的。

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

4

3 回答 3

5

将此 CSS 提供给.projectMore：

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

解释

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

于 2012-06-25T20:07:23.460 回答
2

position:relative在 div .projectDetails 上设置。

jsFiddle 示例。

于 2012-06-25T20:06:51.803 回答
1

你有

position: relative

在项目详情？

试试看w3schools

于 2012-06-25T20:08:32.753 回答