web-dev-qa-db-fra.com

comment positionner les div dans un autre div

Je veux positionner les div dans une autre div.

Voici l'extrait pertinent de css ( exemple complet sur 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);
        }

et l'extrait pertinent de 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>

Le problème est que les blocs foo/bar/baz/quux sont positionnés par rapport à la fenêtre du navigateur, pas par rapport à leur élément parent.

Qu'est-ce que je fais mal et comment puis-je y remédier?

htmlcsspositioning
11
Jason S

Ajouter position: relative au parent .textblock-container div.

Les éléments positionnés de manière absolue sont positionnés par rapport à leur parent le plus proche (par exemple, l'élément parent le plus proche avec une position absolute ou relative), donc s'ils n'ont pas de parents positionnés explicitement (la position par défaut est static) ils seront relatifs à la fenêtre.

27
Ennui

Sauf si vous ajoutez position: relative; au contrôleur parent, le div sera positionné en absolu de la fenêtre

7
user2568107

Essaye ça :

.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);
}

En fait, il vous suffit d'ajouter la propriété position: relative Pour la div parent.

4
Lucas Willems