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

以下是代码，以查看实时行为：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，{{1} } {，right在bottom定位元素上相对于相对定位的父元素。：）

Answer 2

在div .projectDetails上设置position:relative。

<强> jsFiddle example

Answer 3

你有吗

position: relative

项目详细信息中的

？

尝试查看w3schools

CSS：绝对位置不是相对于div的定位

3 个答案:

说明