استفسارات في الـ CSS

[مناااف]

السلام عليكم ورحمة الله وبركاته

لدي بعض الاستفسارات في الـ CSS

الآن الخاصية position
لها القيم:
absolute
fixed
inherit
relative
static

هل بالإمكان توضيح لكيفية استخدامها بشكل صحيح

مثال لدي هذا الكود

<div1></div>
<div2></div>
<div3></div>

ماذا أعطي لكل واحد مع أني أريدهم أن يتجانبوا أفقياً عمود أيمن وأوسط وأيسر

أو إذا كان هذا الكود

<div1><div2>
</div>
</div>

أريد الأول يكون على اليمين والثاني على اليسار

كذلك كثيراً ما أشاهد الخاصية z-index
هل بالإمكان توضيح عملها

وكل الشكر والتقدير

[Bo3oof]

أولا بالنسبة لخاصية position فهي للمكان أو الموقف للعنصر، يعني إذا كان عنصر div لها خاصية position تساوي absolute فإنها تكون في المقدمة تماما ولا تتبع اي عنصر آخر حتى لو كانت تحت عناصر أخرى وتكون الdiv هي الطاغية في ملف الhtml، للتوضيح ولتقريب الصورة إذا كنت قد استخدمت برنامج مايكروسوفت وورد ووضعت صورة في ملفك النصي فباستطاعتك التحكم في مكان هذه الصورة بالتحكم في الposition أو موقف الصورة، وبالنسبة لrelative فإنها تقدر تقول إن الdiv سيكون مكانه تابع أو متحاذي مع العناصر الأخرى الموجودة معه والمنتمية إلى العنصر الأم وهكذا مع باقي الخواص...

ولكن بالنسبة لسؤالك فإني أعتقد إنك تبحث عن خاصية اسمها float وهي تجعل عناصر الdiv اللتي بها هذه الخاصية تتجانب مع بعضها البعض ولها 3 قيم
right
left
none
تحاذي على اليمين أو على اليسار أو لا تحاذي

أما بالنسبة للz-index فيمكن أن تتخيلها كبعد ثالث للملف، أي نحن نعلم أن الملفات لها بعدين 2 dimensions اللي هم x,y ويمكنك بالمناسبة التحكم بهما بخاصية top,left ولكن البعد z هو البعد الموجه إليك، فلنفرض أن لديك عنصران div فوق بعض، العنصر اللذي لديه القيمة الأكبر من الz-index سيكون في المقدمة

أتمنى أكون قد وضحت لك أخي الكريم الفكرة
ولزيادة الإطلاع
خواص الposition: ا http://www.w3schools.com/css/pr_class_position.asp
خواص الfloat: ا http://www.w3schools.com/css/pr_class_float.asp

مع تحياتي

[Zizwar]

بارك الله فيك أخي أبو عوف على الشرح الوافي
نفس السؤال كان قد سأله الأخ 2600ma وهنا كان جوابنا انا و الأخ انترنت بلس
http://www.swalif.net/softs/showthread.php?t=107750

[مناااف]

شكراً جزيلاً أخي الفاضل Bo3oof

شرح واضح بارك الله فيك

الذي فهمته أنني لست بحاجة position عندما أضعها بهذا الشكل

<div style="width:800px">
<div id="rightcol" style="float:right; width:200px"></div>
<div id="centerbody" style="float:right; width:400px"></div>
<div id="leftcol" style="float:left; width:200px"></div>
</div>

وأستخدم absolute عندما أريد تحديد موقع div بالنسبة للصفحة
وعندما يكون div2 و div3 داخل div1
أستخدم relative لمحاذاة div2 بالنسبة لـ div3
أتمنى أكون فاهم صح :shy:

بالنسبة للـ z-index واضحة جداً

وشكراً لك أخي الفاضل Wino على الرابط والشرح المفيد

بارك الله فيكم جميعاً