web-dev-qa-db-ja.com

別のdiv内にdivを配置する方法

Divを別のdiv内に配置したい。

関連するcssのスニペットを次に示します（ cssdeskの完全な例 ）：

        .textblock-container {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        div.textblock {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid black;
            position: absolute;
            text-align: center;             
            background: rgb(0, 150, 0); /* Fall-back for browsers that don't
                                support rgba */
            background: rgba(0, 150, 0, .5);
        }

およびhtmlの関連するスニペット：

    <div id='blockdiv1' class='textblock-container'>
        <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div>
        <div id='blockdiv3' class='textblock'><span>bar (NE)</span></div>
        <div id='blockdiv4' class='textblock'><span>baz (SW)</span></div>
        <div id='blockdiv5' class='textblock'><span>quux (SE)</span></div>
    </div>

問題は、foo/bar/baz/quuxブロックが、親要素ではなくブラウザウィンドウに対して相対的に配置されることです。

私は何を間違っていますか、どのように修正できますか？

htmlcsspositioning
11
Jason S

追加 position: relative親へ.textblock-container div.

絶対に配置された要素は、最も近くに配置された親（たとえば、absoluteまたはrelativeの位置にある最も近い親要素）に対して相対的に配置されるため、明示的に配置された親がない場合（デフォルトの位置はstatic）それらはウィンドウに相対的です。

27
Ennui

position: relative;を親コントローラーに追加しない限り、divはウィンドウの絶対位置に配置されます

7
user2568107

これを試して ：

.textblock-container {
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}

div.textblock {
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid black;
position: absolute;
text-align: center;             
background: rgb(0, 150, 0);
background: rgba(0, 150, 0, .5);
}

実際、親divにposition: relativeプロパティを追加するだけです。

4
Lucas Willems