3- Relative
یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
مثال (مقدار relative در خصوصیت display)
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
خودتان امتحان کنید »{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
عنصری که به صورت نسبی (Relative) موقعیت دهی شده است، می تواند روی دیگر عناصر قرار بگیرد، اما مکان عادی عنصر همچنان رزور شده باقی می ماند.
مثال (مقدار relative در خصوصیت display)
h2.pos_top
{
position:relative;
top:-50px;
}
خودتان امتحان کنید »{
position:relative;
top:-50px;
}
عنصری که به صورت نسبی موقعیت دهی شده باشد، اغلب به عنوان ظرفی برای عناصر absolute استفاده می شوند:
<div style="position: relative;">
<p style="position: absolute; top: 0px; right: 0px;">----</p>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1;">
------
</div>
</div>
<p style="position: absolute; top: 0px; right: 0px;">----</p>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1;">
------
</div>
</div>
