هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟

[أحمد عبدالمنعم]

بسم الله الرحمن الرحيم ..

Position_ هو أحد الأوامر المثيرة جدا في تقنية CSS فمن خلالها يمكنك تقسيم وتوزيع الموقع وتتحكم فيه كالوحة الشطرنج
وسأقدم لكم فكرة عامة عنه مع الأمثلة

شاهد ( هذا المثال ) على متصفح قياسي وحاول أن تحرّك شريط التمرير الجانبي من المتصفح لترى العناصر الثابتة والعناصر الأخرى التى تتحرك ـ والصفحة عبارة عن مجموعه من الفقرات <p> تم التحكم فيها بشكل عشوائي عن طريق ذلك الأمر بوضع فئات class متعددة لكل منهم ..

نتابع .. فالـ Position : وهو كما الأسم وظيفته تحديد الموضع لأي عنصر او صندوق موجود داخل صفحة العرض بنافذة المتصفح
وهذا الأمر له 4 خصائص للتحكم في الموضع



وكل خاصية فيهم لها إتجاهات أو إحداثيات ( أفقي ورأسي ) يتم تحديد بها مكان موضعها بالضبط!



وتدخل القيم عن طريق الأرقام بوحدات قياس او النسب المئوية % هكذا فقط في إتجاهين

#box3 {
	position: absolute;
	top: 25%;
	left: 120px;
}

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

static : وهو الوضع الإعتيادى ـ وفيه لا يمكن تحديد الموضع عن طريق الإحداثيات top left bottom right ولا تؤثر أو تشاهد تأثيرها في حالة وضعها



relative : ويحدد فيه الموضع بالنسبه للعنصر الإعتيادي السابق ـ اى ان موضعه يُحَدَد نسبه الى الوضع الإعتيادي فهو تابع دائما ومتناسب مع أقرب العناصر له ويسمح بإستخدام إحداثيات التموضع.



absolute : يقوم بتعيين موضع العنصر بشكل مستقل عن أي عنصر آخر.



fixed : وهي نفس الخاصية السابقة absolute ولكن المضاف فيها إنها تكون ثابته في مكانها نسبه الى موضعها الذى حُدد ـ بمعنى لو حركت شريط التمرير بالمتصفح ستظل ثابته في مكانها مع تحرك العناصر الأخرى .. ( لا يدعمها متصفح Internet Explorer الا مع النسخه الأخيرة 7 )



الكل .....



----------

Position_ له علاقة وثيقة ومتصل بالأمر clip مع الوضع الحر او المطلق "absolute"
و clip وهو المقص ومنه تُحدد المجال أو المساحة المرئية من العنصر عن طريق تعين أربعه إحداثيات له بداية من أعلي الزاوية اليسرى.. ( لا يدعمة متصفح Internet Explorer )



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

ويكتب بهذا الشكل ..

#box3 {
	position:absolute;
	clip:rect(0px,300px,339px,150px);
}

( هذا مثال ) شاهدة على متصفح قياسي مثل Firefox أو Opera ولاحظ كيف ظهرت الصورة مقطوعه بعدها حاول ان تحفظ الصورة في جهازك لتشاهدها مكتملة ..

----------

Position_ له نفس العلاقة السابقة ومتصل مع الأمر z-index الخاص بالتحكم في ظهور وترتيب الصناديق للأعلي والأسفل وإن جاز التعبير العُمق فهو يتعامل مع الصناديق على هيئة طبقات ، ويتحكم في أي العناصر ستظهر أولا ومن بعدها الأخرى وهكذا ...

وفي المنتدى يوجد مثال جيد وشرح مفهوم عنها تابعه من هنا
http://www.swalif.net/softs/swalif44...2/#post1343550

----------

Position_ يمكن أن تجده أيضا بشكل آخر ضمن خصائص الخلفية background وله تطبيقات كثيرة جدا ويكتب بهذا الشكل ..

#box3 {
	background-position: right bottom;
	/*OR*/
	background-position: 25% 400px;
}

الخلفية البيضاء هنا هى خلفية الصندوق الموجود داخله الخلفية

ووظيفته في هذه الحالة هو تحديد موضع الخلفية داخل الصناديق وتعين إحداثيات في إتجاهين ( أفقي ورأسي ) ويمكن أن تحدد بإتجاه واحد بالنسب المئوية أو الأرقام والكتابة المباشرة لوضعها في الزاوية ( أعلى، أسفل، يمين، يسار ) ....

وهذا الأمر هام جدا في حالة وضع أكثر من خلفية داخل نفس الصندوق بالإستعانة بالوسم <span> أكثر من مرة والمثال المشهور على ذلك في حالة عمل الصناديق بالحواف الدائرية فانت تتحكم بكل صورة وتحدد موضعها بالزوايه داخل الصندوق


## إنتهى ## وبالمرفق تجدوا جميع الأمثلة للتجربة ..
_[ بالإضافة الى تطبيق رائع على background-position وتحديد الأجزاء النشطة من الصورة إكتشفوه بنفسكم وطريقة عمله ]

أى معلومات إضافية عن كل مايتعلق بـ Position أو تصحيح لما ورد ياريت تفيدونا
وللجميع التحية ،،

[jawwwad]

جزيل الشكر لك اخي الكريم
على الموضوع المفيد
نتمنى المزيد من المواضيع حول تقنية css
ملاحضة : عبارة " لا يدعمة متصفح Internet Explorer " تكررت كتيرا في النص

[Ala7lam]

شكرا لك على الدرس،

لكن أتمنى أن توضح Relative بشئ من التفصيل.

العلاقة تكون من عنصر له نفس ID العنصر الذي له position: relative أم ماذا ، و مافي الفائدة الكبيرة من إستخدامه؟ فأنا لم استخدمه من قبل.


تحياتي .

[ABo.AzAzI]

شكرا ً جزيلا ً ...

[أحمد عبدالمنعم]

jawwwad
العفو ، وفعلاً تكررت العبارة مرتين فقط بالشرح وكنت أتمنى أن تتكرر أكثر من ذلك مرات ومرات :funny:
ودا علشان خاطر بس حبايبنا اللى مازالوا يستخدموا هذا المتصفح التعيس جداا



Ala7lam
عفواً ـ ولا ليس كذلك فهى تماماً كما ظهرت بالصورة دون أى زيادة
وبطريقة أخري _فنحن متفقين وقلنا أنه في الخواص absolute و fixed كنا نحدد الإحداثيات نسبه الى نافذة المتصفح المفتوحة أمامك أي إنها إحداثيات الصفحة الحقيقية

بمعنى أنك لو وضعت الصندوق مكانه أسفل الحافة العليا بـ50 بكسل ويبعد عن الجانب الإيمن مقدار 100بكسل سترى موضعه هكذا تماماً في نافذة المتصفح المفتوحة أمامك والشاشة كلها إن كانت النافذة تملأها صغيرة أو كبيرة في دقة شاشة عالية أو أقل ، مابتفرق لان البعد حقيقي..إذن فالمعيار هنا والمقياس هى تلك النافذة..

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

ويمكن صورة زى دى توضح أكثر :looking:



مجموعه من الصناديق داخل بعض كل صندوق يأخذ إحداثياته من اللى قبلة

مثال أخر

<p class="box">السلام عليكم ورحمة الله وبركاتة 
<span style="position: relative; bottom:10px; right:10px">كل عام وأنتم بخير</span> 
<span style="position: relative; top:30px; right:30px"><strong>(بمناسبة شهر رمضان الكريم إعادة الله علينا بالخير)</strong></span></p>

الكلام داخل الوسم span الأول يأخذ إحداثياته من الوسم p الكبير والوسم span الثاني يأخذ إحداثياته من الوسم اللى قبلة :eek3:



ABo.AzAzI عفواً

[أحمد عبدالمنعم]

Ala7lam وجدت أيضا بعد البحث بأرشيف سوالف توضيح من الأخ Zizwar عن الخاصية relative مع مثال
http://www.swalif.net/softs/swalif54...50/#post728610

[Ala7lam]

شكرا لك على التوضيح،

النقطة التي لم تكن واضحة لدي هي من أي عنصر يآخذ العلاقة، إذا هو بالعنصر الذي يسبقه حتى و لو يكن بداخله؟

شكرا لك

[Zizwar]

موضوع مميز جدا وان شاء الله يبقى مرجعا للتعريف عن Position او التموضع، لأن صراحة هناك من يتقن ال css جيدا، لكن يتشابه عليه او لايعرف الفرق بين التموضع الثابت و النسبي

[أحمد عبدالمنعم]

Ala7lam تمام

Zizwar تسلم على التواجد وشكراً على تثبيت الموضوع ، وبالفعل الكثير تختلط عليهم الخواص وقليل أن تجد أحد يطبقها ويستخدمها في توزيع موقعه بشكل صحيح ..

تحيتي لكم ،

[seifss]

شكرا ياكتوم مبدع كا العاده

[aMINE]

السلام عليكم ...

بارك الله فيك أخي ca2oom ، موضوع مميز و قد أفادني كثيرا ...

تحيتي ...

[Wcc]

تشكر أخي الفاضل على الموضوع المهم و فعلا جاء في وقته ...

استفسار بسيط إن أمكن عن طريقة وضع div في الوسط centre او إعطائها Position بالـ &#37;

حتى تتوافق مع جميع الــ Rosultions

[أحمد عبدالمنعم]

شكرا ياكتوم مبدع كا العاده

السلام عليكم ...

بارك الله فيك أخي ca2oom ، موضوع مميز و قد أفادني كثيرا ...

تحيتي ...

عفواً أخوان ـ واتمنى لكم الإفادة

تشكر أخي الفاضل على الموضوع المهم و فعلا جاء في وقته ...

استفسار بسيط إن أمكن عن طريقة وضع div في الوسط centre او إعطائها Position بالـ %

حتى تتوافق مع جميع الــ Rosultions

سيان.. ولكن بما أن الأمر هو توسيط div فقط يكفي أن تعطيها align=center حسب مكانه ولن تجد مشاكل بالتوافق ..

[-مشاري-]

الله يعطيك العافيه


ماقصرت

[x_yousef_x]

بارك الله فيك وفتح عليك ورزقك من حيث لا تحتسب

تحياتي