Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

لو كنت لا تريد أو لا تملك الصلاحية لترقية المتصفح يمكنك أن تستمر في التصفح على الرحب و السعة لكن تذكر قد لا تتمكن من استعراض بعض خدمات الموقع بالشكل المطلوب . بالطبع يمكنك إخفاء هذه الرسالة و تستمر في التصفح و لن تظهر لك هذه الرسالة مرة أخرى .

Post Pic

Css : المكان المناسب للعناصر باستخدام position

تعرف في هذا الموضوع على الخاصية position و أنواعها و الاستفادة منها في تحريك عناصر الصفحة و وضعها في مكانها الصحيح .

الأمر position هو من الخصائص المهمة جدا في css . الخاصية باختصار تحدد مكان العنصر في الصفحة و هناك عدد من القيم التي يمكن ل position تقبلها سنستعرضها :

ملاحظة

تم تعديل هذا الموضوع في ٨-يوليو -٢٠١٠ لإضافة و تعديل بعض المعلومات الناقصة

Static

و هي الخاصية التلقائية . كل النصوص و عناصر الصفحة تكون من النوع الثابت static إلا لو كنت حددت غير ذلك و هي بذلك تأخد المكان المقرر لها في سياق الصفحة فمثلا لو كانت ثالث عنصر يظهر في الصفحة ستكون كذلك و لن يتغير مكانها و كمثال :


#div  {
position:static;
}

Relative

و هي تحدد مكان العنصر أو الشكل مقارنة بمكانة في سياق الصفحة مثال الشكل div1 سنعطيه القيمة relative و مع استخدامنا relative يمكننا استخدام خصائص أخرى مثل

  • للأعلى top
  • لليمين right
  • لليسار left
  • للأسفل bottom
  • z-index الترتيب

و لكن ما سيتغير هنا في relative على الوضع العادي static هو أننا يمكننا تحريك العنصر أو الشكل في بالمسافة التي نراها مناسبة مثلا نحركة لأعلى بإعطاء قيمة للخاصية top أو للاسفل بإعطاء قيمة للخاصية bottom و هكذا


#div1 {
position:relative;
top:20px;
right :-10px

{

في المثال السابق حركنا الشكل إلى الأعلى بمقدار 20 بكسل و إلى اليمين بمقدار قيمة سالبة هي 10 و القيمة السالبة تعني أننا نحركه عكس اليمين .

Absolute

و هي تحريك الشكل مقارنة بالعنصر الأب أو الأم( بما اني أم فسيكون العنصر الأم ) و في حالتنا هنا فالعنصر الأم هو الصفحة ككل لان العنصر لا يوجد داخل عنصر اخر .. فلو حددنا top :10 فأننا نقصد تحريك الشكل من مسافة 10 بكسل  مقارنة بأعلى الصفحة و ليس مقارنة بموقعه الحالي في سياق الصفحة .

لاحظ الصور الثلاث  التالية :

position_01


#div1{

position: static ;

}

position_02


#div1{

Position :relative ;

top:10px

right:15px;

}

في المثال الثاني اعطينا الشكل القيمة relative و حركنا الشكل إلى أعلى بمقدار 10 بكسل و إلى اليمين بمقدار ١٥ بكسل .

position_03


div1{

position:absolute ;

top:10px

right:15px ;

}

اعطينا  الشكل الخاصية  absolute أي المكان المطلق و بالتالي  سيكون بعد الشكل عن إعلى الصفحة 10 بكسل و بعده عن يمين الصفحة 15 بكسل و هكذا نرى أن الخاصية absolute تتيح لنا تحريك الشكل مقارنة بأعلى نقطة في الصفحة لاحظ في الشكل رقم ٣ أن اقصى نقطة على الطرف الأيسر تحمل الاحداثي 0 و 0 و بالتالي إذا حددنا

  • top=0
  • left=0

سيتحرك الشكل إلى الزاوية  اليسرى العلوية .

الأم و الأبن

كل الامثلة السابقة تتحدث عن Div موجودة في الصفحة دون ان يحيطه شي اخر  لكن ماذا لو كان  Div2 موجودا داخل  Div1 اخر مثلا .. ببساطة سنعتبر Div1 هو الأم أي مثل الصفحة في المثال السابق  و div1 هو الابن .و لكن تذكر لتحريك العنصر الابن داخل الام يجب ان تحمل الام خاصية Position :relative و الا تناثرت العناصر و لن تستطيع السيطرة عليها فمن يستطيع السيطرة على الأبناء كالأم .

Z-index

عند اعطائنا القيمة relative و absolute إلى أي عنصر في الصفحة يمكننا استخدام الخاصية  z-index و هذه الخاصية تمكنك من ترتيب ظهور العناصر فوق بعضها .  العناصر التي تأخذ قيمة اكبر تظهر اولا .

position_04

zindex02

في النموذج الأول كان الكود بالشكل التالي :


#div1{
position:relative;
top:50px;
left:100px;
z-index:10;
}
#div2{
position:relative;
top:15px;
left:150px;
z-index:999;
}

الكود للنموذج الثاني


#div1{
position:relative;
top:50px;
left:100px;
z-index:9999;
}
#div2{
position:relative;
top:15px;
left:150px;
z-index:999;
}

على أي أساس نحدد قيمة z-index ؟

نحدد القيمة بالشكل الذي نراه مناسبا انا دائما اضع اكبر قيمة للعنصر الذي أريد التأكد من ظهوره دوما  هي في الغالب قيم عشوائية كما يمكنك اختيار قيم سلبية مثلا اعطي الشكل الذي لا اريد ظهور أي شكل فوقه القيمة ٩٩٩٩ و هي قيمة تقديرية و ليست إلزامية كما يمكن تحديد قيم سالبة .

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , , ,

تعليقات الزوار (8)

[+] أضف تعليقك من فضلك



  1. Mo3aTh كتب:

    يعطيك ربي الف عافية متابعين لجديدك يادكتور :)


  2. احسآسـ كتب:

    الله يسعدك ..

    عندي استفسار لو سمحت ^__^

    عندي تصميم ثابت كيف أخليه في وسط الصفحة ؟

    في الجداول مافي اسهل من التوسيط

    بس

    في CSS صار لي أكثر من شهرين أحاول اوسط التصميم بس ما قدرت !

    ويعافيك ربي ويسعد ايامك ،،


  3. صرقعة كتب:

    يعطيك الف عافيه .. استفدت كثير منك


  4. احسآسـ كتب:

    لا خلاص عرفت اوسط و عرفت شغلات حلوهـ

    ^__^

    الله يعطيك العافيه يا دكتور ..

    في امان الله .