Understanding Stacking Context
كتير من الأيام منكون عم نعمل layout وبدنا نحط div فوق div او صورة؛
فاول شي رح يخطرلنا نعملو انو نستعمل z-index اللي هي بتغير ترتيب العناصر الطبيعي بس احيانا منحاول نغير القيمة تبع الz-index ومنحطا اكبر رقم ممكن نفكر فيه، بس مع هيك مابيتغير الترتيب، غالبا لما بصير معنا هيك شي منضل عم نجرب بال inspect element لحتى يصير الشي اللي بدنا ياه.
اليوم رح نتعرف عواحد من اهم الشغلات اللي بتتحكم بهالقصة، واللي هو ال stacking context، الموضوع مو معقد على قد ما مهمش فبتلاقي قليل مانكون سمعنا فيه من قبل، او حدا ذكرو. رح حاول اشرح المفهوم بشكل عام وشو هي الالتباسات اللي بتصير.
العنصر الرئيسي اللي هو ال <html>
هي الحالة بسيطة كتير واغلبنا معدية عليه، مثلا بدي اعمل position: absolute لل navbar رح يكون بالنسبة للhtml
لما نستعمل z-index
الصورة اللي فوق بتشرحلنا كيف الstacking context رح يصير فيو مستوى تاني، طبعا الcontext ماهو نفسو اللي رح يكون مكان العنصر الداخلي بالنسبة للعنصر الخارجي.
خطأ شائع: اغلبنا منفكر انو لما دنعمل positioning بالنسبة لعنصر؛
فبشكل عام منعمل الاب { position:relative} بس هاد الشي مو صح 100% لان فعليا العنصر الداخلي (الchild) رح يبحث عن اول عنصر الposition تبعو مو static.
فتطبيقا لما ذكرناه فوق، منقدر نعمل نفس الصورة السابقة اذا ستعملنا {position: absolute} طبعا للتاكيد ماضروري يكون absolute او relative حتى لو كان fixed عادي.
طبعا بهالمقالة مارح نحكي عن الz-index ولاعن اي خاصية css تانية، فاذا مهتم انا تارك رابط للdocs.
<div style="position: absolute; width:150px; height:150px; background- color: red; left:50%; top:100px;">
<div style="position: absolute; width:10px; height:10px; top: calc(50% - 5px);left:calc(50% - 5px); background-color: green;">
</div>
</div>مثال بسيط لتوضيح ماقلناه سابقا.
طبعا في عدة اشياء بتعمل stacking context مو بس الz-index، رح نكمل الشغلات اللي بتعملو بس رح نذكرها مع المرجع المناسب اذا حدا بدو يعرف عنها اكتر.
لما نستخدم خاصية opacity وتكون القيمة تبعها اقل من 1
e.g.
{ opacity: 0.7 }لما نستعمل خواص الtransform
لما تكون قيمة transform غير القيمة الافتراضية اللي هي none.
لما تكون قيمة { transform-style : preserve-3d }
لما تكون قيمة perspective غير القيمة الافتراضية.
لما نستعمل filter effects (غير القيمة الافتراضية).
لما { isolation: isolate }
لما mix-blend-mode يكون غير الافتراضي.
في مفهوم تاني مهم انو نكون منعرف انو موجود، بس اكيد ما ضروري نحفظ الترتيب، المفهوم هو الpainting order طبعا هو مكمل لل stacking context لان كلن نابعين من نفس المكان، ما اظن كتير ضروري نكون منعرف الترتيب هو مع الوقت واحد بيحفظو بس ماضروري لان ماكتير رح يصير معنا مشاكل بسببو، بس انو ممكن ننسال هيك شي بالمقابلات، للاسف هاد الشي مالو شرح عربي بس بشكل عام القصة بسيطة بتقرو تقروها من هون.
اخيرا وليس آخرا، منقدر نعمل inspect للstacking context بهي الchrome extension
المقالة الجاي رح تكون بين هالموضوعين ف قلت اعمل تصويت شوف الاراء.
إن الله يحب الأعمال الصالحة، التي تنفع الناس، لذلك يقول عز وجل (فَمَن كَانَ يَرْجُو لِقَآءَ رَبِّهِ فَلْيَعْمَلْ عَمَلاً صَالِحاً وَلاَ يُشْرِكْ بِعِبَادَةِ رَبِّهِ أَحَدَا) واستناداً، وتطبيقًا، لتلك الآية الكريمة قمت بنشر مقالي هذا، أبتغي رضا الله، والصالح للبشر أجمعين.