Position one element relative to another in CSS

Question

I want to position four divs relative to another   I have a rectangle div  and I want to insert 4 divs at its corners   I know that CSS has an attribute  position relative   but this is relative to the normal position of that element   I want to position my divs not relative to their normal position  but relative to another element  the rectangle   What should I do

User · Answer

I would suggest using absolute positioning within the element.

I've created this to help you visualize it a bit.

_x000D_

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

_x000D_

<div id="parent">_x000D_
<div id="div1"></div>_x000D_
<div id="div2"></div>_x000D_
<div id="div3"></div>_x000D_
<div id="div4"></div>_x000D_
_x000D_
</div>

_x000D_

http://jsfiddle.net/wUrdM/

User · Answer

position  absolute will position the element by coordinates  relative to the closest positioned ancestor  i e  the closest parent which isn t position  static   Have your four divs nested inside the target div  give the target div position  relative  and use position  absolute on the others   Structure your HTML similar to this    lt div id  container  gt     lt div class  top left  gt  lt  div gt     lt div class  top right  gt  lt  div gt     lt div class  bottom left  gt  lt  div gt     lt div class  bottom right  gt  lt  div gt   lt  div gt    And this CSS should work    container     position  relative      container  gt        position  absolute      left     left  0      right     right  0      top     top  0      bottom     bottom  0

[css] Position one element relative to another in CSS

Examples related to css

Examples related to css-position