- #ثريد -
[ Position Property in CSS ]
ثريد جديد وبتكلم عن البوزيشن أو موضع الElement في الصفحة،
طبعاً البوزيشن فيه بعض الاشياء لازم تتوضح لك ويمكن كثير ما يعرفونها وأشياء هامه بتكلم عنها في هذا الثريد إن شاء الله!
⬇️ - - - - -⬇️
[ Position Property in CSS ]
ثريد جديد وبتكلم عن البوزيشن أو موضع الElement في الصفحة،
طبعاً البوزيشن فيه بعض الاشياء لازم تتوضح لك ويمكن كثير ما يعرفونها وأشياء هامه بتكلم عنها في هذا الثريد إن شاء الله!
⬇️ - - - - -⬇️
نبدأ مقدمة بسيطة:
وش هو البوزيشن؟ المعنى الافضل لو نرجع للمعنى في الغة العربية وهو " المكان" او "الموضع" - لكن الافضل أنك تعتمد على الاسم المعترف فيه وهو " position " ⬇️
وش هو البوزيشن؟ المعنى الافضل لو نرجع للمعنى في الغة العربية وهو " المكان" او "الموضع" - لكن الافضل أنك تعتمد على الاسم المعترف فيه وهو " position " ⬇️
طيب! وش فكرته؟
فكرة البوزيشن بإختصار أنه يحدد لك موضع أو مكان الelement
,وايضاً له خمس قيّم داخل وظيفة البوزيشن وكل وحدة لها فكرة مختلفه، وبعضهم متشاركين بأشياء معينه بذكرها خلال هذا الثريد
- static
- fixed
- relative
- absolute
- sticky
فكرة البوزيشن بإختصار أنه يحدد لك موضع أو مكان الelement
,وايضاً له خمس قيّم داخل وظيفة البوزيشن وكل وحدة لها فكرة مختلفه، وبعضهم متشاركين بأشياء معينه بذكرها خلال هذا الثريد
- static
- fixed
- relative
- absolute
- sticky
طيب! مثل ماهو موضح بالصورة وراح نعتمد الصورة هذي بالثريد في شرح القيّم الخمس,
بس ركز بالصورة وحاول تفهم نظرة سطحية جداً، حتى وإن مافهمت كمل معي وبإذن لله تفهم!
⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️
بس ركز بالصورة وحاول تفهم نظرة سطحية جداً، حتى وإن مافهمت كمل معي وبإذن لله تفهم!
⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️ - - - ⬇️
[Position: Static]
طيب بناخذ وحدة وحدة من الصورة الي فوق ونشوف الفكرة بشكل افضل،،
1 - لازم تعرف تماماً إن كل element في الصفحة ياخذ قيمة بوزيشن static (تلقائياً)
وهذا الي يخلي العناصر في الصفحة ثابتة اذا ماحدث عليها تغيير
أما بالساينتكس بيكون:
position:static;
طيب بناخذ وحدة وحدة من الصورة الي فوق ونشوف الفكرة بشكل افضل،،
1 - لازم تعرف تماماً إن كل element في الصفحة ياخذ قيمة بوزيشن static (تلقائياً)
وهذا الي يخلي العناصر في الصفحة ثابتة اذا ماحدث عليها تغيير
أما بالساينتكس بيكون:
position:static;
![[Position: Static]
طيب بناخذ وحدة وحدة من الصورة الي فوق ونشوف الفكرة بشكل افضل،،
1 - لازم تعرف ت...](https://pbs.twimg.com/media/EQVrxnIXYAAD-j_.png)
حلو! فهمنا اول قيمة وهي static وسهله وخفيفه،
طيب وش هي قيمة fixed?
مثل ما موضح بالصورة الشريط الي تنزل فيه والي هو scrollbar عليه علامة إكس، وش يعني هذا؟
معناه: أن كلما تحركت بالصفحة الإيليمنت الي فيه position fixed ما يتغير من مكانه
يتبع..
طيب وش هي قيمة fixed?
مثل ما موضح بالصورة الشريط الي تنزل فيه والي هو scrollbar عليه علامة إكس، وش يعني هذا؟
معناه: أن كلما تحركت بالصفحة الإيليمنت الي فيه position fixed ما يتغير من مكانه
يتبع..
طيب تمام! خلك معي وركز زين، بعطيك امثلة بسيطة
شفت search أو البحث بتويتر؟ كل ما تنزل تحت ما يتغير مكانه صح؟ هذا لأنه fixed
طيب! مثال ثاني؟ : شوف ال gif
شفت search أو البحث بتويتر؟ كل ما تنزل تحت ما يتغير مكانه صح؟ هذا لأنه fixed
طيب! مثال ثاني؟ : شوف ال gif
ايضاً لازم تعرف أن في كل بوزيشن اربع اماكن وهي
Top, Left, Right, Bottom
يعني مثلاً نبي بوزيشن فيكسيد والإيليمينت ونخلي الايلمينت من اليمين 100 بكسل
بالساينتكس:
element{
position:fixed;
right:100px;
}
Top, Left, Right, Bottom
يعني مثلاً نبي بوزيشن فيكسيد والإيليمينت ونخلي الايلمينت من اليمين 100 بكسل
بالساينتكس:
element{
position:fixed;
right:100px;
}
[Position: relative]
طيب حلو فهمنا الفيكسد، وش القيمة ريلايتف؟، هي بكل بساطة أنت تحدد الموضع لكن بالنسبه لموضعه الأصلي، وش معنى هذا الكلام؟ الحين بفهمك
مثل ما تشوف بالصورة اذا حددت المكان وحطيته مثلاً فوق المكان الأصلي بيكون محجوز - خلنا نعطيك بعض الأمثلة
يتبع..
طيب حلو فهمنا الفيكسد، وش القيمة ريلايتف؟، هي بكل بساطة أنت تحدد الموضع لكن بالنسبه لموضعه الأصلي، وش معنى هذا الكلام؟ الحين بفهمك
مثل ما تشوف بالصورة اذا حددت المكان وحطيته مثلاً فوق المكان الأصلي بيكون محجوز - خلنا نعطيك بعض الأمثلة
يتبع..
![[Position: relative]
طيب حلو فهمنا الفيكسد، وش القيمة ريلايتف؟، هي بكل بساطة أنت تحدد الموضع لكن با...](https://pbs.twimg.com/media/EQVr0e2XUAEbWZA.png)
لو تشوف الفيديو ، الاولى بريلايتيف والثانية وضحت انه بدون ريليتف الايتم ماراح يكون محجوز واذا حذفناه بيحل مكانه الايتم الي تحته
[Position: Absoulte]
الأبسولت أو الغير نسبي أو المطلق، هذا أنك كلما تحدد مكانه ماراح يحجز مكان ،
وايضاً مكانه بيكون بالنسبه للأب وهو إبن
كيف يعني؟ بكل بساطة لو عندنا ديف "ريلايتف" ( ركز! ريليتف ) وداخله ايليمنت ابسولت، لو تحدد مكانه بيكون فقط داخل الريلايتف،
يتبع..
الأبسولت أو الغير نسبي أو المطلق، هذا أنك كلما تحدد مكانه ماراح يحجز مكان ،
وايضاً مكانه بيكون بالنسبه للأب وهو إبن
كيف يعني؟ بكل بساطة لو عندنا ديف "ريلايتف" ( ركز! ريليتف ) وداخله ايليمنت ابسولت، لو تحدد مكانه بيكون فقط داخل الريلايتف،
يتبع..
![[Position: Absoulte]
الأبسولت أو الغير نسبي أو المطلق، هذا أنك كلما تحدد مكانه ماراح يحجز مكان ،
وا...](https://pbs.twimg.com/media/EQVr6wmXUAYTSZj.png)
لكن إذا كان بدون أب بيكون الاب الإفتراضي - يعني بيكون بالديفلت كلاس لصفحة html
وهذي العلاقة بينهم ( بإختصار بدون ما اقول تفاصيل - بذكر اكثر من مصدر قريب اذا كان ودك تتعمق اكثر )
ومثل ماتلاحظون بالفيديو وضحت الفكرة - في البداية كان مع ريلايتف اما بعد ما شلناه طلع من الديف!
وهذي العلاقة بينهم ( بإختصار بدون ما اقول تفاصيل - بذكر اكثر من مصدر قريب اذا كان ودك تتعمق اكثر )
ومثل ماتلاحظون بالفيديو وضحت الفكرة - في البداية كان مع ريلايتف اما بعد ما شلناه طلع من الديف!
[Position: sticky]
يبيلك تفهم أن sticky يوم تنزل السكرول بار أو تنزل بالموقع تحت ووصلت له راح يصير fixed،
وللاسف الصورة الي كانت موجودة ما ذكرت الsticky
لكن وضحت بالفيديو الفكرة
يتبع..
يبيلك تفهم أن sticky يوم تنزل السكرول بار أو تنزل بالموقع تحت ووصلت له راح يصير fixed،
وللاسف الصورة الي كانت موجودة ما ذكرت الsticky
لكن وضحت بالفيديو الفكرة
يتبع..
Sticky:
وايضاً في موقع الشخص الاسطوري - فادي الاسودي موجودة sticky في النافبار مثل ماهو موضح بالفيديو
@f_aswadi
وايضاً في موقع الشخص الاسطوري - فادي الاسودي موجودة sticky في النافبار مثل ماهو موضح بالفيديو
@f_aswadi
شكراً لكم للقراءة، وأتمنى إستفدتم وفهمتم الثريد بشكل جيد
الكنوز هنا!:
w3schools: w3schools.com
مقال عربي: wiki.hsoub.com
مقال بالإنجليزي جميل: freecodecamp.org
أي استفسار انا بالخدمة!❤️
الكنوز هنا!:
w3schools: w3schools.com
مقال عربي: wiki.hsoub.com
مقال بالإنجليزي جميل: freecodecamp.org
أي استفسار انا بالخدمة!❤️
وايضاً حاب اشكر ، الاسطوري @Alaa_Najmi
والاسطوري @PrograminLovers واشكركم على دعمكم لي وتحفيزكم وبإذن لله القادم افضل!
والاسطوري @PrograminLovers واشكركم على دعمكم لي وتحفيزكم وبإذن لله القادم افضل!
جاري تحميل الاقتراحات...