77. استخدام Grid لتداخل العناصر

لأن Grid يسمح لك بوضع عناصر متعددة في نفس خلية الشبكة، فهو أداة ممتازة لإنشاء تداخلات متعمدة، وخلفيات، وتأثيرات التراكم.

تداخل العناصر

إذا تم تعيين عنصرين ليشغلا نفس المساحة بالضبط (نفس خطوط البداية/النهاية)، فسوف يتداخلان. يتم تحديد ترتيب تكدسهما من خلال ترتيب المصدر، ما لم يتم تطبيق z-index.

مثال: وضع عنصر (.overlay) مباشرة فوق منطقة محتوى رئيسية (.hero-image).

css .container { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }

.hero-image, .overlay { /* كلاهما يشغل نفس الخلية الواحدة */ grid-column: 1 / 2; grid-row: 1 / 2; }

.overlay { z-index: 10; /* يضمن أن تراكب النص فوق الصورة */ padding: 50px; text-align: center; }

خلاصة أساسية: تموضع Grid يجعل تحديد حدود التداخلات المعقدة أبسط بكثير من استخدام position: absolute الذي يعتمد بشكل كبير على سياق الأب والحساب اليدوي.