web-dev-qa-db-fra.com

Comment placer div à l'intérieur d'un autre div en position absolue?

Par exemple, je voudrais créer un modèle comme dans l'image ci-dessous.

http://i.imgur.com/OneRsMw.png

Comment positionnez-vous chaque div à l'intérieur du conteneur à sa position absolue? Je préférerais sans avoir besoin d'utiliser des attributs flottants. Tout court exemple serait apprécié.

csscss3css-position
18
Stybos

Vous pouvez utiliser le positionnement absolute et relative.

par exemple

html 

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

css 

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

Démo sur http://jsfiddle.net/gaby/MB4Fd/1/

( bien sûr, vous pouvez ajuster le positionnement réel à votre préférence, en changeant les valeurs haut/gauche/droite/bas)

33
Gabriele Petrioli

Utilisation position: relative; sur le conteneur (un <div> contenant tout le contenu) et positionner absolument les éléments enfants. Les éléments enfants à l'intérieur du conteneur seront positionnés par rapport au conteneur, il serait donc assez facile de tout organiser selon vos besoins.

Cependant , il est considéré comme une mauvaise pratique d'utiliser le positionnement dans la plupart des cas pour aménager votre site .. Je suggère d'utiliser des flotteurs même si vous prétendez ne pas vouloir vous aurez beaucoup plus de cohérence entre les différents navigateurs.

Lisez cet article si vous êtes confus au sujet des flotteurs

6
Adrift