14

I want to position divs within another div.

Here's the relevant snippet of css (full example on 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);
        }

and the relevant snippet of 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>

The problem is that the foo/bar/baz/quux blocks are positioned relative to the browser window, not to their parent element.

What am I doing wrong and how can I fix it?

4

3 に答える 3

8

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

于 2013-07-12T17:34:54.553 に答える