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

では絶対位置付けです.projectMore。.dialogEditProjectブラウザにページをロードすると、絶対に配置されていないように見えます。

動作をライブで確認するためのコードは次のとおりです。

4

3 に答える 3

5

この CSS を に渡します.projectMore:

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

説明

要素relativeの位置を指定すると、それが配置された要素の境界になるため、相対的に配置された親に対して、配置された要素で、 、を使用できabsoluteます。:)topleftrightbottomabsolute

于 2012-06-25T20:07:23.460 に答える
2

position:relativediv.projectDetailsに設定します。

jsFiddleの例。

于 2012-06-25T20:06:51.803 に答える
1

ありますか

position: relative

プロジェクトの詳細で？

w3schoolsを見てみる

于 2012-06-25T20:08:32.753 に答える