خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.

قيم الخاصية position

تحتوي خاصية position على أربع قيم رئيسية بصفات مختلفة فلو قلنا أن لدينا عنصر من التصميم نريد تحديد موقعه في الصفحة سيكون موقع هذا العنصر بالنسبة لإستخدامنا خاصية position إذا حمل أحد هذه القيم:

  • Static: وتعني أن موقع العنصر ساكن أي سيكون في مكانه لا تستطيع إستخدام الخواص الأخرى في تحريكه لأربع إتجاهات سواء Top ، Left ، Bottom ، Right.
  • Relative: وتعني أن موقع العنصر يتغير بالنسبة لموقعه بدون إستخدام خاصية position أي نسبةً للعناصر الأخرى حوله.
  • Absolute: وتعني أن موقع العنصر يتغير بالنسبة للصفحة (قياس الصفحة كاملة) أي لا يتأثر بالعناصر الآخرى ولكن يتأثر بقياس الصفحة عند التصغير أو التكبير ويتأثر في حال كان ضمن عنصر آخر يحمل قيمة Relative.
  • Fixed: وتعني أن موقع العنصر ثابت لا يتأثر في حال تغير قياس الصفحة ولا يتأثر إذا وصعته ضمن عنصر آخر يحمل أي قيمة من القيم التي ذكرتها. (يعمل على الإصدار السابع من متصفح الإكسبلورر)

هذا بالنسبة لقيم خاصية position ولكن هناك خواص آخرى لا تعمل إلا بوجوده مثل Top ، Left ، Bottom ، Right ، … بالتأكيد هناك خواص أخرى ، وسنشرح أولاً هذه الخواص الأربع ، كما هي واضحة من أسمائها فتعني بعد العنصر في الصفحة سواء من إتجاه اليمين أو الأعلى أو اليسار أو الأسفل.

position

لو طبقنا هذه الإتجاهات على عنصر يتحتوي خاصية position ، إذا كانت خاصية position محددة على قيمة static لن تتأثر بالخواص الأخرى التي ذكرتها ( top ، left ، bottom ، right ) ، أما لو حملت قيمة relative سيتأثر موقعها بإستخدام تلك الخواص ولكن تأثيرها سيكون بالنسبة لمحتويات الصفحة (عناصر الصفحة) فلو إفترضنا العنصر box يتحتوي على خاصية position وقيمة relative ومع بعدين من الأعلى واليسار:


#box {
	position: relative;
	top: 50px;
	left: 130px;
}

وفي نفس الوقت هناك عناصر أخرى مثل header و sidebar وغيره فسيكون حساب مكان العنصر (الذي يحمل القيمة relative) بالنسبة لهذه العناصر الموجودة في الصفحة لنفرض وجود عنصر يحمل قيمة static فإنه لا يقبل الخصائص الأخرى مثل top ، left ، right ، bottom:

position1

لو كان لدينا عنصر أخر ولكن خاصية position فيه تساوي قيمة absolute لن يتأثر العنصر بأي عنصر آخر في الصفحة (إلا في حالة أن هذا العنصر موجود ضمن عنصر آخر مثلاً يحمل قيمة relative) بل سيتأثر بقياس الصفحة وسيكون موقع حسب الصفحة:

position2

ولو أضفنا عنصر آخر وحددنا فيه قيمة fixed في خاصية position سيكون ثابت لا يتأثر بقياس الصفحة أو بتحريك شريط التمرير ولا يتأثر بأي عنصر آخر حتى لو كان هو ضمن عنصر (Parent Element) فسيكون مكانه ثابت:

position3

أعتقد الصورة هنا وضحت تماماً لقيم position وإستخدام الخواص الأخرى مثل top ، left ، bottom ، right ، وتطبيق آخر على قيمة absolute في خاصية position ، لو إفترضنا وجود عنصرين ، عنصر أب Parent Element و عنصر إبن Child Element ، العنصر الأب محدد على قيمة relative من خاصية position ، أما العنصر الإبن محدد على قيمة absolute بهذا الشكل:

#parentElement {
	position: relative;
}
#childElement {
	position: absolute;
	right: 50px;
	bottom: 30px;
}

فإن موقع العنصر الإبن childElement# سيكون ثابت بالنسبة لموقعه ضمن العنصر الأب ، والسبب هو أن خاصية absolute كما ذكرناها تتأثر بقياس الصفحة أو بقياس العنصر الذي يحتويه (إذا كان العنصر يستخدم خاصية position) ولا تتأثر بالنسبة للعناصر الجانبية لها عموماً:

position4

ولكن إن أنشأنا عنصر آخر ضمن عنصر الأب parentElement# ، وأعطيناه قيمة fixed ضمن خاصية position فإن موقعه سيكون ثابت في الصفحة لن يتأثر بعنصر الأب وموقعه سيكون خارج نطاق دائرة عنصر الأب (حسب قيم الخواص الأخرى)

الآن إنتهينا من شرح خاصية position وسهلة تماماً ، هناك خواص أخرى متعلقة بخاصية position نذكر منها z-index في آخر الدرس.

خاصية z-index

هذه الخاصية تساعدك على ترتيب أو تحديد ظهور موقع العنصر من بين العناصر ، المعروف إن كان هناك عدة عناصر في الصفحة فإن أولوية ظهور ستكون بدايةً من العنصر الآخير وإن كان لدينا عنصر أب Parent Element و عنصر إبن Child Element فإن ظهور العنصر الإبن سيكون أولاً ثم عنصر الأب ، ما يميز خاصية z-index هنا هو ترتيبه لظهور العناصر مهما كان ترتيبها في تركيبها ضمن شفرة html.

لو كان لدينا عنصر حددنا فيه خاصية z-index وحددنا قيمته 10 وعنصر آخر قيمته 50 وعنصر آخر أيضاً حددنا فيه قيمة 100 وهما متقاربين مع بعضهما فسيكون ظهور العنصر المحدد بقيمة 100 أولاً ثم الثاني ،شفرة CSS + شفرة XHTML:

.zBox {
	position: absolute;
	width: 100px;
	height: 100px;
}
<div class="zBox" style="z-index: 10;"></div>
<div class="zBox" style="z-index: 50;"></div>
<div class="zBox" style="z-index: 100;"></div>

النتيجة في الصورة التالية على ثلاثة طبقات:

z-index

يمكن إستغلال هذه الخاصية بعدة طرق في عمل عدة أشياء ، مطور المواقع Chris Coyier صاحب موقع CSS Trick طرح سابقاً تدوينة مرئية رائعة عن عدة طرق لإستخدام خاصية z-index ، وخاصةً بإستخدام المحدد “hover:” يمكن عمل عدة أشياء بهذا المحدد وأيضاً طرق أخرى بالتأكيد.