-
استفسارات في الـ CSS
السلام عليكم ورحمة الله وبركاته
لدي بعض الاستفسارات في الـ CSS
الآن الخاصية position
لها القيم:
absolute
fixed
inherit
relative
static
هل بالإمكان توضيح لكيفية استخدامها بشكل صحيح
مثال لدي هذا الكود
كود HTML:
<div1></div>
<div2></div>
<div3></div>
ماذا أعطي لكل واحد مع أني أريدهم أن يتجانبوا أفقياً عمود أيمن وأوسط وأيسر
أو إذا كان هذا الكود
كود HTML:
<div1><div2>
</div>
</div>
أريد الأول يكون على اليمين والثاني على اليسار
كذلك كثيراً ما أشاهد الخاصية z-index
هل بالإمكان توضيح عملها
وكل الشكر والتقدير
-
أولا بالنسبة لخاصية 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
مع تحياتي
-
بارك الله فيك أخي أبو عوف على الشرح الوافي
نفس السؤال كان قد سأله الأخ 2600ma وهنا كان جوابنا انا و الأخ انترنت بلس
http://www.swalif.net/softs/showthread.php?t=107750
-
شكراً جزيلاً أخي الفاضل Bo3oof
شرح واضح بارك الله فيك
الذي فهمته أنني لست بحاجة position عندما أضعها بهذا الشكل
كود HTML:
<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 على الرابط والشرح المفيد
بارك الله فيكم جميعاً