خاصية CSS z-index

كيفية العمل معz-indexالممتلكات في CSS

في الوظيفة تحديد المواقعذكرت أنه يمكنك استخدام ملفz-indexخاصية للتحكم في موضع المحور Z للعناصر

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

تأخذ هذه الخاصية رقمًا (بدون الكسور العشرية) وتستخدم هذا الرقم لحساب العناصر التي تظهر بالقرب من المستخدم ، في المحور Z.

كلما زادت قيمة الفهرس z ، زاد وضع العنصر بالقرب من المستخدم.

عند تحديد العنصر الذي يجب أن يكون مرئيًا وأي عنصر يجب وضعه خلفه ، يقوم المتصفح بإجراء عملية حسابية على قيمة مؤشر z.

النظام الأساسيauto، كلمة رئيسية خاصة. استخدامauto، يتم تحديد ترتيب المحور Z من خلال موضع عنصر HTML في الصفحة - يظهر الشقيق الأخير أولاً ، كما تم تحديده أخيرًا.

العناصر الافتراضية لها الامتدادstaticقيمةpositionمنشأه. في هذه الحالة ، فإنz-indexالخاصية لا تحدث أي فرق - يجب ضبطها علىabsoluteوrelativeأوfixedللعمل.

مثال:

.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div { position: absolute; top: 0; left: 0; width: 500px; height: 500px; z-index: 20; }

العنصر مع الطبقة.my-second-divوخلفه.my-first-div.

استخدمنا هنا 10 و 20 ، لكن يمكنك استخدام أي رقم. الأرقام السالبة أيضًا. من الشائع اختيار أرقام غير متتالية ، بحيث يمكنك وضع العناصر في المنتصف. إذا كنت تستخدم أرقامًا متتالية بدلاً من ذلك ، فستحتاج إلى إعادة حساب الفهرس z لكل عنصر مشارك في تحديد الموضع.

تحميل مجانيكتيب CSS


المزيد من دروس css: