<< Back to main menu

Relative

In this layout, #div_2 has relative position and a placement value applied left and top. This has moved it in relation to its original position in the layout similar to that acheived with margin but the effect is different. Note that #div_3 is now overlapped by #div_2. This overlap is equivalent to the amount of positioning given to the top of #div_2

#div_1 {
background-color: #999;
padding: 10px;
width: 500px;
}

#div_2 {
background-color: #FC0;
padding: 10px;
width: 500px;
left: 50px;
top: 20px;
position: relative;
}
#div_3 {
background-color: #999;
padding: 10px;
width: 500px;
}