freeCodeCamp

title	localeTitle
Z Index	مؤشر Z

مؤشر Z

Z Index ( z-index ) هي خاصية CSS تقوم بتعريف ترتيب عناصر HTML المتداخلة. سيتم وضع العناصر ذات مؤشر أعلى على عناصر ذات مؤشر أقل.

ملاحظة : يعمل الفهرس Z فقط على العناصر الموضوعة ( position:absolute ، position:relative ، أو position:fixed ).

`/* Default value if not specified */ z-index: auto;

/* Integer values */ z-index: 1; z-index: 100; z-index: 9999; z-index: -1;

/* Global values */ z-index: inherit; z-index: initial; z-index: unset; `

في هذا المثال ، يمكنك مشاهدة ثلاث مربعات معروضة فوق بعضها البعض في أوامر مختلفة باستخدام z-index .

HTML

CSS

`#blue { background-color: blue; }

#red { background-color: red; }

#green { background-color: green; } `

بما أنه لم يتم تعريف z-index ، فستكون له قيمة افتراضية من auto . هذه نتيجة:

حاول تغيير الترتيب إلى الأخضر والأزرق والأحمر في CSS باستخدام z-index .

`#blue { background-color: blue; z-index: 2; }

#red { background-color: red; z-index: 1; }

#green { background-color: green; z-index: 3; } `

ستكون النتيجة الخاصة بك:

استخدم Z Index إذا كنت بحاجة إلى وضع عنصر خلفية أسفل الحاوية. يمكنك وضع الخلفية بسهولة تحت كل عنصر عن طريق إعطائها مؤشر Z سلبي مثل أدناه:

#background { z-index: -1; }