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

ADMIN · 09-21-2007, 07:37 مساءً

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

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

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

دروس في بي سكربت دروس web2.0 دروس ASP هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس HTML دروس ماي سكيول دروس اس كيو ال سرفر دروس PERL دروس JavaScript

وسأقدم لكم فكرة عامة عنه مع الأمثلة

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

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

دروس PYTHON دروس PYTHON دروس في بي سكربت هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس قواعد البيانات دروس اي اس بي دروس بيرل دروس جافا سكريبت Java Script دروس SQL Server

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

دروس Oracle دروس XML دروس web2.0 هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس ASP دروس Oracle دروس VB Scripts دروس بي اتش بي دروس بايثون

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

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

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

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

دروس ASP دروس اكس ام ال دروس PYTHON هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس اتش تي أم أل دروس هتمل دروس اوراكل دروس HTML دروس web2.0

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

دروس PYTHON تطوير تطبيقات الويب هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس HTML دروس اوراكل دروس اس كيو ال سرفر دروس قواعد البيانات دروس قواعد بيانات

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

دروس قواعد البيانات دروس صفحات الأنماط الانسيابية هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس ماي سكيول دروس جافا سكريبت Java Script دروس جافا سكريبت Java Script دروس اوراكل دروس ماي سكيول

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

دروس Oracle دروس بيرل دروس PHP هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس جي اس بي دروس XML دروس بايثون دروس قواعد البيانات دروس PYTHON

الكل .....

دروس ماي سكيول دروس SQL Server دروس قواعد البيانات هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس PYTHON دروس اس كيو ال سرفر دروس MySQL دروس web2.0 دروس HTML

----------

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

دروس VB Scripts دروس هتمل تطوير تطبيقات الويب هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس اس كيو ال سرفر دروس SQL Server دروس جي اس بي دروس بي اتش بي دروس اتش تي أم أل

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

ويكتب بهذا الشكل ..
كود:
#box3 { position:absolute; clip:rect(0px,300px,339px,150px);}

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

----------

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

----------

Position_ يمكن أن تجده أيضا بشكل آخر ضمن خصائص الخلفية background وله تطبيقات كثيرة جدا ويكتب بهذا الشكل ..
كود:
#box3 { background-position: right bottom; background-position: 25% 400px;}

دروس FoxPro دروس JSP دروس اتش تي أم أل هل تعرف ماهو ال Position وخصائصة في تقنية CSS ؟ دروس هتمل دروس اتش تي أم أل دروس MySQL دروس اكس ام ال دروس XML

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

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

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

كتب الدرس: ca2oom

فالكون · 09-22-2007, 09:07 صباحاً

درس مفيد جدا الحقيقه .. شكرا ابوسعود

بنكلنتون · 10-01-2007, 02:42 مساءً

اشكرك اخى

بارك الله فيك

الجهني · 10-21-2007, 04:39 مساءً

تسلم على هالشرح المفيد
ولدي سؤال هل استطيع عمل موقع كامل بال Css
تحياتي

ADMIN · 10-24-2007, 06:48 صباحاً

العفو اخواني

بالنسبه لعمل موقع امل بتقنية الـ css فهذا ممكن بل يستحسن ذلك

ابن الرافدين · 11-15-2007, 10:15 مساءً

مشكور ابو سعود
الله يعطيك العافيه

المهندس · 11-19-2007, 04:12 مساءً

يعطيك العافية اخوي ابو سعوود و الله ما قصرت يالغلا

وان شاء الله بدروسكــم نتقدم ونستفيد اكثر و اكثر

الف شكر ....

09-21-2007, 07:37 مساءً	#1 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 50,546 معدل تقييم المستوى: 53	هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ هل تعرف ماهو الـ 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 الخاص بالتحكم في ظهور وترتيب الصناديق للأعلي والأسفل وإن جاز التعبير العُمق فهو يتعامل مع الصناديق على هيئة طبقات ، ويتحكم في أي العناصر ستظهر أولا ومن بعدها الأخرى وهكذا ... ---------- Position_ يمكن أن تجده أيضا بشكل آخر ضمن خصائص الخلفية background وله تطبيقات كثيرة جدا ويكتب بهذا الشكل .. كود: #box3 { background-position: right bottom; background-position: 25% 400px;} الخلفية البيضاء هنا هى خلفية الصندوق الموجود داخله الخلفية ووظيفته في هذه الحالة هو تحديد موضع الخلفية داخل الصناديق وتعين إحداثيات في إتجاهين ( أفقي ورأسي ) ويمكن أن تحدد بإتجاه واحد بالنسب المئوية أو الأرقام والكتابة المباشرة لوضعها في الزاوية ( أعلى، أسفل، يمين، يسار ) .... وهذا الأمر هام جدا في حالة وضع أكثر من خلفية داخل نفس الصندوق بالإستعانة بالوسم <span> أكثر من مرة والمثال المشهور على ذلك في حالة عمل الصناديق بالحواف الدائرية فانت تتحكم بكل صورة وتحدد موضعها بالزوايه داخل الصندوق كتب الدرس: ca2oom من مواضيع ADMIN في المنتدى بلوتوث سيارات حصه آلـ سعود الإصدار الاخير من عملاق الضغط الشهير WinRAR 3.71 قصيده للفلوجه - هيروشيما العراق متسول عاري في البحرين برنامج Ai Roboform 6.69 للإحتفاظ بالسجل الكامل للمواقع والأرقام السرية الخاصة بها __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

09-22-2007, 09:07 صباحاً	#2 (permalink)
فالكون :: عضو شرف :: تاريخ التسجيل: Jan 2007 الدولة: Q8 المشاركات: 1,867 معدل تقييم المستوى: 31265	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ درس مفيد جدا الحقيقه .. شكرا ابوسعود من مواضيع فالكون في المنتدى [ Hack ] هاك تصغير الصور لمجلة mkportal [ شرح + تعديل ] إضافة مراقب عام ( لايستطيع الدخول إلى لوحة التحكم ) خاص لإبن الخليج ستايل برشلونة لعشاق النادي الكتلوني [ احــتـرافـــــــي ] موهية برتغالية جديده .. يكسبها الشياطين الحمر [ناني] [Block][all] افضل السيارات من تقييم الياهو , من برمجتي __________________ Gulfson

10-01-2007, 02:42 مساءً	#3 (permalink)
بنكلنتون عضو نشيط تاريخ التسجيل: Oct 2006 المشاركات: 130 معدل تقييم المستوى: 23	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ اشكرك اخى بارك الله فيك من مواضيع بنكلنتون في المنتدى مشكله بسيطه مشكله فى الصور درــــــــــــــــس عن كيفية صنع مفكرة للمبتدئين مشكله بالقروبات مطلوب مشرفين ومراقبين للمنتدى

10-21-2007, 04:39 مساءً	#4 (permalink)
الجهني عضــو تاريخ التسجيل: Aug 2007 المشاركات: 37 معدل تقييم المستوى: 11	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ تسلم على هالشرح المفيد ولدي سؤال هل استطيع عمل موقع كامل بال Css تحياتي من مواضيع الجهني في المنتدى جديد على المجله وحاولت التركيب مين لها ويقول ابشر ارجو الا تبخلو بالرد ودع الفرنت بيج ورمه جديد على المجله وحاولت التركيب

10-24-2007, 06:48 صباحاً	#5 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 50,546 معدل تقييم المستوى: 53	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ العفو اخواني بالنسبه لعمل موقع امل بتقنية الـ css فهذا ممكن بل يستحسن ذلك من مواضيع ADMIN في المنتدى مسلسل طاش ماطاش وكرتون الخمر!ّ! [شرح] دمج قواعد بيانات في غاية السهولة شهيد بعد ستة أيام من إستشهاده (مقطع اعجازي) هلا ورالله بـ Alaincity درس القـــلم السحري __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

	Sitemap \| Archive \| Tag Could
	$معهد مطور - ينتهي الإعلان بتاريخ 16\10\2008$

$منتديات نظرة حب - ينتهي الاعلان بتاريخ 6\11\2008$		$الرَّقائق دعوة لترقيق القلوب - ينتهي الاعلان بتاريخ 6\11\2008$
		$نغمات إنتظار الشادي - ينتهي الاعلان بتاريخ 6\11\2008$

11-15-2007, 10:15 مساءً	#6 (permalink)
ابن الرافدين اسرة ابن الخليج تاريخ التسجيل: Oct 2006 الدولة: بلاد الرافدين المشاركات: 5,224 معدل تقييم المستوى: 1536	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ مشكور ابو سعود الله يعطيك العافيه من مواضيع ابن الرافدين في المنتدى القلوب انواع فما هو نوع قلبك ؟ برنامج NetScream تم افتتاح منتدى جميل اوي محكمه المنتدى تحميل برنامج Contact Card 1.1.0 __________________ . شكرا شوشو عاشت الايادي الطيبه ماتقصرين فيكي كل كل الخير

11-19-2007, 04:12 مساءً	#7 (permalink)
المهندس عضو مستمر تاريخ التسجيل: Aug 2006 المشاركات: 54 معدل تقييم المستوى: 408	رد: هل تعرف ماهو الـ Position وخصائصة في تقنية CSS ؟ يعطيك العافية اخوي ابو سعوود و الله ما قصرت يالغلا وان شاء الله بدروسكــم نتقدم ونستفيد اكثر و اكثر الف شكر .... من مواضيع المهندس في المنتدى هاك منع الزوار من مشاهدة المواضيع و الارشيف مفتوح ما استطيع اسجل خروج مشكلة متعلقة في الستايلات عندي استفسار+حل+اعدادات= هاك vbseo و الsitemap لقوقل اريد تعديل هذا الملف ارجوكم

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كل ما تريد عن تاريخ الرياضيات	ADMIN	شخصية و تاريخ	3	07-14-2008 02:33 مساءً
ماذا جرى في مدينة حلبجة الكردية عام 1988 ؟	بـلال	حوارات ثقافية عامة	11	05-05-2008 02:44 مساءً
مواضيع مكذوبة ?!!	الصعيدي المشاغب	حوارات ثقافية عامة	6	12-25-2006 03:29 مساءً
تحريف القرآن	قلب الاسد	حوارات ثقافية عامة	4	08-21-2006 08:28 مساءً
هداية الحيارى في جواز قتل الأسارى (دراسة وتحليل)	الهوى ماهو كلام	حوارات ثقافية عامة	2	05-05-2006 07:24 مساءً

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

منتديات شبكة ابن الخليج