Positionner un élément par rapport à un autre dans la CSS
je veux à la position quatre divs par rapport à l'autre. J'ai un rectangle div, et je veux insérer 4 divs à l'un de ses coins. Je sais que CSS a un attribut "position:relative", mais ceci est relatif à la position normale de cet élément. Je veux placer mon div s non pas par rapport à leur position normale, mais par rapport à un autre élément (le rectangle). Que dois-je faire?
2 réponses
je vous suggérons d'utiliser le positionnement absolu à l'intérieur de 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>position: absolute positionnera l'élément par coordonnées, par rapport au ancêtre le plus proche, i.e. le parent le plus proche qui n'est pas position: static.
ayez vos quatre divs imbriqués dans le div cible, donnez le div cible position: relative, et utiliser position: absolute sur les autres.
structurez votre HTML comme ceci:
<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 le CSS devrait fonctionner:
#container {
position: relative;
}
#container > * {
position: absolute;
}
.left {
left: 0;
}
.right {
right: 0;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
...