random
أخبار ساخنة

شرح خاصية z-index في CSS مع أمثلة عملية للمبتدئين

Samouel Ghaly
الصفحة الرئيسية

شَرْحُ خَاصِّيَّةِ z-index فِي CSS مَعَ الأَمْثِلَةِ العَمَلِيَّةِ لِلْمُبْتَدِئِينَ

عِنْدَمَا نَبْدَأُ فِي بِنَاءِ وَتَنْسِيقِ صَفَحَاتِ الوِيبِ بِاسْتِخْدَامِ لُغَةِ CSS، نَعْتَادُ عَلَى تَرْتِيبِ العَنَاصِرِ فِي بُعْدَيْنِ هُمَا: البُعْدُ الأُفُقِيُّ (X-axis) وَالبُعْدُ العَمُودِيُّ (Y-axis). وَلَكِنْ، عِنْدَمَا تَبْدَأُ العَنَاصِرُ فِي التَّدَاخُلِ وَالتَّرَاكُبِ فَوْقَ بَعْضِهَا البَعْضِ، نَحْتَاجُ إِلَى بُعْدٍ ثَالِثٍ عَمِيقٍ وَهُوَ (Z-axis). هُنَا يَأْتِي الدَّوْرُ السِّحْرِيُّ لِخَاصِّيَّةِ z-index الَّتِي تَقُومُ بِتَعْيِينِ تَرْتِيبِ ظُهُورِ الطَّبَقَاتِ بَصَرِيًّا؛ فَهِيَ الَّتِي تُحَدِّدُ مَنْ مِنَ العَنَاصِرِ يَقِفُ فِي الأَمَامِ وَمَنْ يَتَرَاجَعُ إِلَى الخَلْفِ.

---

الشَّرْطُ الأَسَاسِيُّ لِعَمَلِ خَاصِّيَّةِ z-index

قَبْلَ أَنْ نَتَعَرَّفَ عَلَى كَيْفِيَّةِ كِتَابَةِ الأَرْقَامِ، هُنَاكَ قَاعِدَةٌ ذَهَبِيَّةٌ يَجِبُ أَنْ تَعْرِفَهَا كَمُبْتَدِئٍ: خَاصِّيَّةُ z-index لَا تَعْمَلُ نِهَائِيًّا عَلَى العَنَاصِرِ الَّتِي تَمْتَلِكُ تَمْوِيعًا اِفْتِرَاضِيًّا position: static;.

مُلَاحَظَةٌ حَاسِمَةٌ: لِكَيْ تَسْتَجِيبَ الطَّبَقَةُ لِأَمْرِ الـ z-index، يَجِبُ أَوَّلًا أَنْ نَمْنَحَهَا خَاصِّيَّةَ position بِأَيِّ قِيمَةٍ أُخْرَى غَيْرِ الِاسْتَاتِيكِيَّةِ، مِثْلَ: (relative، أَوْ absolute، أَوْ fixed، أَوْ sticky).
---

الْقِيَمُ المُمْكِنَةُ لِخَاصِّيَّةِ z-index

يُمْكِنُكَ التَّحَكُّمُ فِي تَرْتِيبِ الطَّبَقَاتِ بِاسْتِخْدَامِ عِدَّةِ قِيَمٍ قِيَاسِيَّةٍ:

  • auto (الِافْتِرَاضِيُّ): تَعْنِي أَنَّ المُتَصَفِّحَ سَيَقُومُ بِتَرْتِيبِ العَنَاصِرِ تِلْقَائِيًّا بِنَاءً عَلَى تَرْتِيبِ كِتَابَتِهَا فِي شِيفْرَةِ الـ HTML (العُنْصُرُ المَكْتُوبُ أَخِيرًا يَظْهَرُ فَوْقَ العُنْصُرِ الَّذِي قَبْلَهُ).
  • الأَرْقَامُ الصَّحِيحَةُ (Integers): يُمْكِنُكَ كِتَابَةُ أَرْقَامٍ مُوجَبَةٍ مِثْلَ (1, 2, 100, 999) أَوْ أَرْقَامٍ سَالِبَةٍ مِثْلَ (-1, -2). العُنْصُرُ الَّذِي يَمْتَلِكُ رَقْمًا أَعْلَى يَظْهَرُ دَائِمًا فِي المُقَدِّمَةِ فَوْقَ الأَرْقَامِ الأَقَلِّ.
  • initial: تَعْمَلُ عَلَى إِعَادَةِ ضَبْطِ الخَاصِّيَّةِ لِتَعُودَ إِلَى قِيمَتِهَا الِافْتِرَاضِيَّةِ الأُولَى.
  • inherit: تَجْعَلُ العُنْصُرَ يَرِثُ نَفْسَ قِيمَةِ الطَّبَقَةِ الخَاصَّةِ بِالعُنْصُرِ الأَبِ (Parent).
---

مِثَالٌ عَمَلِيٌّ: تَرَاكُبُ المُرَبَّعَاتِ المُلَوَّنَةِ

لِنَفْرِضْ أَنَّ لَدَيْنَا ثَلَاثَةَ صَنَادِيقَ مُتَدَاخِلَةٍ مَكْتُوبَةٍ بِصِيغَةِ الـ HTML، وَنُرِيدُ تَعْيِينَ تَرْتِيبِ ظُهُورِهَا بَصَرِيًّا عَبْرَ الـ CSS: 

<!-- بِنْيَةُ الطَّبَقَاتِ فِي الـ HTML -->
<div class="container">
    <div class="box red">المُرَبَّعُ الأَحْمَرُ</div>
    <div class="box green">المُرَبَّعُ الأَخْضَرُ</div>
    <div class="box blue">المُرَبَّعُ الأَزْرَقُ</div>
</div>

<!-- تَنْسِيقَاتُ التَّرَاكُبِ فِي الـ CSS -->
<style>
.container {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #f0f0f0;
}
.box {
    position: absolute; /* شَرْطٌ أَسَاسِيٌّ لِتَفْعِيلِ z-index */
    width: 120px;
    height: 120px;
    color: white;
    text-align: center;
    line-height: 120px;
    font-weight: bold;
}
/* تَعْيِينُ مَوَاقِعَ مُتَدَاخِلَةٍ مَعَ قِيَمِ z-index */
.red { 
    background-color: red; 
    top: 50px; 
    left: 50px; 
    z-index: 1; /* الطَّبَقَةُ السُّفْلِيَّةُ */
}
.green { 
    background-color: green; 
    top: 100px; 
    left: 100px; 
    z-index: 3; /* الطَّبَقَةُ العُلْوِيَّةُ المُطْلَقَةُ */
}
.blue { 
    background-color: blue; 
    top: 150px; 
    left: 150px; 
    z-index: 2; /* طَبَقَةٌ وِسَاطِيَّةٌ */
}
</style>

تَحْلِيلُ النَّتِيجَةِ البَصَرِيَّةِ لِلْمِثَالِ:

  • المُرَبَّعُ الأَخْضَرُ (Green Box): سَيَظْهَرُ فِي الأَمَامِ فَوْقَ جَمِيعِ المُرَبَّعَاتِ لِأَنَّهُ يَمْتَلِكُ أَعْلَى قِيمَةِ z-index: 3;.
  • المُرَبَّعُ الأَزْرَقُ (Blue Box): سَيَكُونُ فِي المُنْتَصَفِ، حَيْثُ يَقَعُ تَحْتَ الأَخْضَرِ وَلَكِنَّهُ يَعْلُو الأَحْمَرَ لِأَنَّ قِيمَتَهُ هِيَ z-index: 2;.
  • المُرَبَّعُ الأَحْمَرُ (Red Box): سَيَتَرَاجَعُ إِلَى الخَلْفِ تَمَامًا لِيُصْبِحَ أَسْفَلَ الطَّبَقَتَيْنِ الأُخْرَيَيْنِ لِأَنَّهُ يَمْتَلِكُ أَقَلَّ قِيمَةِ z-index: 1;.
---

مَفْهُومُ سِيَاقِ التَّكْدِيسِ (Stacking Context)

مِنَ الأَخْطَاءِ الشَّائِعَةِ الَّتِي يَقَعُ فِيهَا المُبْتَدِئُونَ هِيَ كِتَابَةُ رَقْمٍ خُرَافِيٍّ مِثْلَ z-index: 9999; دُونَ أَنْ يَرْتَفِعَ العُنْصُرُ لِلْأَمَامِ. السَّبَبُ فِي ذَلِكَ يَعُودُ لِمَفْهُومِ Stacking Context.

إِذَا كَانَ العُنْصُرُ الأَبُ يَمْتَلِكُ قِيمَةَ z-index: 1;، وَالعُنْصُرُ الأَبُ لِصُنْدُوقٍ آخَرَ مُجَاوِرٍ يَمْتَلِكُ z-index: 2;، فَإِنَّ جَمِيعَ الأَبْنَاءِ دَاخِلَ الأَبِ الأَوَّلِ لَنْ يَسْتَطِيعُوا الظُّهُورَ فَوْقَ الأَبِ الثَّانِي مَهْمَا رَفَعْتَ أَرْقَامَ الـ z-index الخَاصَّةَ بِهِمْ. فَالِابْنُ يَبْقَى مَحْصُورًا دَاخِلَ النِّطَاقِ القِيَاسِيِّ لِأَبِيهِ.

---

جَدْوَلُ تَلْخِيصِ سُلُوكِ الطَّبَقَاتِ

لِمَسْحِ آلِيَّةِ تَرْتِيبِ الصَّنَادِيقِ بِنَظْرَةٍ سَرِيعَةٍ:

قِيمَةُ z-index مَوْقِعُ العُنْصُرِ بَصَرِيًّا حَالَةُ الِاسْتِخْدَامِ الشَّائِعَةِ
أَرْقَامٌ سَالِبَةٌ (مِثْلَ -1) يَتَرَاجَعُ خَلْفَ النَّصِّ الاِفْتِرَاضِيِّ وَالخَلْفِيَّاتِ. وَضْعُ صُورَةِ زَخْرَفَةٍ خَلْفَ مَحْتَوَى المَقَالِ.
قِيمَةٌ صِفْرِيَّةٌ أَوْ auto يَلْتَزِمُ بِتَرْتِيبِ نُزُولِهِ الطَّبِيعِيِّ فِي الـ HTML. النُّصُوصُ وَالعَنَاصِرُ العَادِيَّةُ لِلْمَوْقِعِ.
أَرْقَامٌ مُوجَبَةٌ صَغِيرَةٌ (1 إِلَى 10) يَرْتَفِعُ خَطْوَةً أَوْ خَطْوَتَيْنِ فَوْقَ المَحْتَوَى. عَمَلُ إِطَارٍ بَارِزٍ أَوْ قَائِمَةٍ مُنْسَدِلَةٍ صَغِيرَةٍ.
أَرْقَامٌ مُوجَبَةٌ كَبِيرَةٌ (100+ ) يَصْعَدُ لِيَعْلُوَ كُلَّ شَيْءٍ فِي المَوْقِعِ تَمَامًا. شَرِيطُ القَوَائِمِ الثَّابِتِ (Navbar) أَوْ النَّوَافِذُ المُنْبَثِقَةُ (Popups).
---

خُلَاصَةٌ

تُعَدُّ خَاصِّيَّةُ z-index المِفْتَاحَ الأَسَاسِيَّ لِإِدَارَةِ العَنَاصِرِ المُرَكَّبَةِ وَالمُتَدَاخِلَةِ بِاحْتِرَافِيَّةٍ. كُلُّ مَا عَلَيْكَ تَذَكُّرُهُ هُوَ تَفْعِيلُ الـ position أَوَّلًا، ثُمَّ صِيَاغَةُ الأَرْقَامِ تَدَرُّجًا بِنَاءً عَلَى المُرْتَبَةِ الَّتِي تُرِيدُ مَنْحَهَا لِلْطَّبَقَةِ. طَبِّقْ هَذِهِ المَعَايِيرَ فِي تَصْمِيمَاتِكَ لِتَحْصُلَ عَلَى وَاجِهَاتِ مُسْتَخْدِمٍ مُنَظَّمَةٍ وَخَالِيَةٍ مِنَ التَّدَاخُلَاتِ البَصَرِيَّةِ الغَيْرِ مَقْصُودَةِ.

google-playkhamsatmostaqltradent