زوپیرنت

float: برای این که بتوانیم یک المنت را در سمت چپ یا راست صفحه قرار دهیم، می توانیم از آن استفاده کنیم. مانند مثال زیر که اگر float را به کار نمی بردیم، در سمت چپ قرار می گرفت.
در صفحه html:

<div id="myid">this is the box with left float</div>

در صفحه CSS

#myid{
 width:100px;
 height:100px;
 border:solid 1px black;
 float:right;
}

که خروجی به صورت شکل زیر است

float دو مقدار left یا right را می تواند داشته باشد.
position: این خصوصیت، آیتم مهمی برای طراحی صفحه وب شما است، این که بتوانید تعیین کنید المنت های مختلف در کجای وب سایت شما قرار بگیرند. این خصوصیت می تواند چهار حالت زیر را قبول کند.
absolute: حالتی است که محل قرارگیری آن المنت را دقیقا مشخص می کنیم.
fixed: حالتی که محل قرارگیری آن المنت، از خود مرورگر حساب می شود، پس حتی اگر صفحه شما اسکرول هم داشته باشد، این المنت ثابت می ماند.
relative: حالتی برای تعیین محل المنت با توجه به موقعیتی که در حالت نرمال باید قرار بگیرد.
static: چنانچه برای المنتی position تعیین نکنیم، از این حالت استفاده می شود. مانند مثالی که برای float و همینطور مثال های قبلی گفته شد.
سه آیتم absolute, fixed, relative معمولا با دو آیتم از چهار آیتم top, left, bottom, right می تواند استفاده شود.

• مثال برای حالت absolute

در صفحه html:

<div id="box1">this is the first box</div>
<div id="box2">this is the second box</div>

در صفحه CSS:

#box1{
 width:100px;
 height:100px;
 border:solid 1px black;
}
#box2{
 width:100px;
 height:100px;
 border:solid 1px orange;
}

خروجی به صورت زیر خواهد بود

حال برای المنت absolute , box2 را اعمال می کنیم.

#box2{
 width:100px;
 height:100px;
 border:solid 1px orange;
 position:absolute;
 top:30px;
 left:30px;
}

برای این position، خصوصیت top (فاصله از بالا) و left فاصله از سمت چپ را هم مقدار دهی کردیم. همانطور که در شکل زیر می بینید، دو box با هم تداخل پیدا کردند. ضمنا همانطور که قبلا گفته شد، به دلیل این که position , box2 اش مشخص نشده، پس از نوع static است.

• مثال برای relative

#box2{
 width:100px;
 height:100px;
 border:solid 1px orange;
 position:relative;
 top:30px;
 left:30px;
}

پس مانند مثال absolute است با این تفاوت که مقدار position را مساوی relative قرار دادیم. خروجی شکل زیر خواهد بود.

حالت نرمالی که box2 باید قرار بگیرد، زیر box1 است، ولی با توجه به relative بودن از پایین box1 و از سمت چپ هم ۳۰ پیکسل فاصله گرفته است.

• مثال برای fixed:

برای دیدن اثر این ویژگی، صفحه باید اسکرول داشته باشد، پس box3 را هم تعریف می کنیم و height آن را مساوی ۲۰۰۰ پیکسل قرار می دهیم.
در صفحه html:

<div id="box1">this is the first box</div>
<div id="box2">this is the second box</div>
<div id="box3"></div>

در صفحه CSS:

#box1{
 width:100px;
 height:100px;
 border:solid 1px black;
 }
 #box2{
 width:100px;
 height:100px;
 border:solid 1px orange;
 position:fixed;
 top:30px;
 left:30px;
 }
 #box3{
 height:2000px;
 }

خروجی باز هم شبیه حالت absolute است با این تفاوت که اگر اسکرول را مقداری پایین تر بیاوریم، می بینیم که box2 سر جای خودش باقی خواهد ماند.
علاوه بر استفاده ای که در بالا برای relative گفته شد، می توان استفاده دیگری هم از آن کرد و آن محدود کردن position با ویژگی absolute است.
در صفحه html:

<div id="box1">this is the first box</div>
<div id="box2">this is the second box</div>

در صفحه CSS:

#box1{
 width:200px;
 height:200px;
 border:solid 1px black;
 position:relative;
 left:50px;
}
#box2{
 width:100px;
 height:100px;
 border:solid 1px orange;
 position:absolute;
 top:30px;
 left:30px;
}

box1 از نوع relative و box2 از نوع absolute است.

حال در صفحه html تغییر زیر را انجام می دهیم.

<div id="box1">this is the first box
<div id="box2">this is the second box</div>
 </div>

با این کار، box2 زیر مجموعه یا فرزند box1 می شود و این بار مختصات top و left که ۳۰ پیکسل است را از box1 می گیرد (یا می توانیم بگوییم box1 پدر المنت box2 است).

z-index: برای مواقعی که المنت ها روی همدیگر قرار می گیرند، می تواند استفاده شود و تعیین کنیم که چه المنتی باید بالاتر قرار بگیرد.
در صفحه html:
<div id=”box1″></div>
<div id=”box2″></div>
در صفحه CSS:

#box1{
 width:100px;
 height:100px;
 background:black;
 position:absolute;
 z-index:2;
}
#box2{
 width:100px;
 height:100px;
 background:orange;
 position:absolute;
 top:30px;
 left:30px;
 z-index:1;
}

خروجی به صورت شکل زیر است و به دلیل این که box1، مقدار z-index بالاتری نسبت به box2 دارد، پس روی box2 قرار می گیرد