web-dev-qa-db-fra.com

Positionner un élément par rapport à un autre en CSS

Je veux positionner quatre divs par rapport à un autre. J'ai un rectangle div, et je veux insérer 4 divs à ses coins. Je sais que CSS a un attribut "position:relative", mais cela est relatif à la position normale de cet élément. Je veux positionner mes divs non par rapport à leur position normale, mais par rapport à un autre élément (le rectangle). Que devrais-je faire?

csspositionrelative
44
babak6

Je suggérerais d'utiliser un positionnement absolu dans l'élément.

J'ai créé ceci pour vous aider à le visualiser un peu.

#parent {
    width:400px;
    height:400px;
    background-color:white;
    border:2px solid blue;
    position:relative;
}
#div1 {position:absolute;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:100px;position:absolute;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:absolute;top:0;right:0;background:yellow;}
#div4 {width:100px;height:100px;position:absolute;top:0;left:0;background:gray;}
<div id="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</div>

http://jsfiddle.net/wUrdM/

32
Aaron Miler

position: absolute positionnera l'élément par ses coordonnées, par rapport au ancêtre le plus proche, c'est-à-dire le parent le plus proche qui n'est pas position: static.

Avez vos quatre div imbriqués dans le div cible, donnez le div cible position: relative, et utilise position: absolute sur les autres.

Structurez votre code HTML de la manière suivante:

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

Et ce CSS devrait fonctionner:

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...
37
Blender