خَاصِّيَّةُ Position فِي CSS بِطَرِيقَةٍ مُبَسَّطَةٍ مَعَ الأَمْثِلَةِ العَمَلِيَّةِ
تُعْتَبَرُ خَاصِّيَّةُ position فِي لُغَةِ
CSS الأَدَاةَ الرَّئِيسِيَّةَ وَالمِحْوَرِيَّةَ الَّتِي
تُتِيحُ لِمُطَوِّرِي الوِيبِ التَّحَكُّمَ الكَامِلَ فِي مَوْقِعِ وَأَمَاكِنِ
العَنَاصِرِ عَلَى صَفْحَةِ الوِيبِ. مِنْ خِلَالِ هَذِهِ الخَاصِّيَّةِ،
نَسْتَطِيعُ تَحْدِيدَ مَا إِذَا كَانَ العُنْصُرُ سَيَبْقَى مُلْتَزِمًا
بِتَدَفُّقِهِ الطَّبِيعِيِّ، أَمْ يَتَحَرَّكُ نِسْبِيًّا، أَمْ يَنْفَصِلُ
تَمَامًا لِيُوضَعَ فِي مَكَانٍ مُحَدَّدٍ بِالدِّقَّةِ، أَوْ حَتَّى يَبْقَى
ثَابِتًا أَثْنَاءَ تَمْرِيرِ الصَّفْحَةِ (Scrolling). فِي هَذَا الدَّلِيلِ
المُبَسَّطِ، سَنَشْرَحُ القِيَمَ الخَمْسَ الأَسَاسِيَّةَ لِهَذِهِ
الخَاصِّيَّةِ مَعَ أَمْثِلَةٍ كُودِيَّةٍ جَاهِزَةٍ.
1. خَاصِّيَّةُ static (التَّمْوِيعُ الاِفْتِرَاضِيُّ)
هَذِهِ هِيَ القِيمَةُ الاِفْتِرَاضِيَّةُ (Default) لِأَيِّ عُنْصُرٍ يَتِمُّ
إِنْشَاؤُهُ فِي الـ HTML. تَعْنِي القِيمَةُ static أَنَّ
العُنْصُرَ يَخْضَعُ تَمَامًا لِتَدَفُّقِ الصَّفْحَةِ الطَّبِيعِيِّ (Normal
Flow)، حَيْثُ يَظْهَرُ تِلْقَائِيًّا بَعْدَ العُنْصُرِ الَّذِي قَبْلَهُ.
تَنْبِيهٌ هَامٌّ: عِنْدَ هَذِهِ القِيمَةِ، لَا تَعْمَلُ خَصَائِصُ التَّحْرِيكِ
مِثْلَ (top، bottom، left،
right، أَوْ z-index).
/* العُنْصُرُ يَلْتَزِمُ بِمَكَانِهِ الطَّبِيعِيِّ دُونَ أَيِّ تَحْرِيكٍ */
div {
position: static;
background-color: lightblue;
padding: 10px;
}
---
2. خَاصِّيَّةُ relative (التَّمْوِيعُ النِّسْبِيُّ)
عِنْدَمَا نَمْنَحُ العُنْصُرَ القِيمَةَ position: relative;،
فَإِنَّهُ يَظْهَرُ أَوَّلًا فِي مَكَانِهِ الطَّبِيعِيِّ، لَكِنْ يُصْبِحُ
بِإِمْكَانِنَا الآنَ تَحْرِيكُهُ نِسْبِيًّا عَنْ هَذَا المَوْقِعِ الأَصْلِيِّ
بِاسْتِخْدَامِ خَصَائِصِ الِاتِّجَاهَاتِ (top, left,
إلخ). مِيزَةُ هَذِهِ القِيمَةِ أَنَّ المِسَاحَةَ الأَصْلِيَّةَ لِلْعُنْصُرِ
تَبْقَى مَحْجُوزَةً، وَلَا تَتَأَثَّرُ العَنَاصِرُ الأُخْرَى بِتَحَرُّكِهِ
بَلْ قَدْ يَتَدَاخَلُ فَوْقَهَا.
/* إِزَاحَةُ العُنْصُرِ بِنِسْبَةٍ مُحَدَّدَةٍ عَنْ مَوْقِعِهِ الأَصْلِيِّ */
div {
position: relative;
top: 20px; /* الدَّفْعُ لِلْأَسْفَلِ بِمِقْدَارِ 20 بِكْسِلْ */
left: 30px; /* الدَّفْعُ لِلْيَمِينِ بِمِقْدَارِ 30 بِكْسِلْ */
background-color: lightgreen;
padding: 10px;
}
---
3. خَاصِّيَّةُ absolute (التَّمْوِيعُ المُطْلَقُ)
تَقُومُ قِيمَةُ absolute بِإِخْرَاجِ العُنْصُرِ تَمَامًا مِنْ
تَدَفُّقِ الصَّفْحَةِ الطَّبِيعِيِّ (Out of Flow)، وَكَأَنَّهُ يَطْفُو فِي
طَبَقَةٍ مُنْفَصِلَةٍ، فَلَا يَحْجِزُ أَيَّ مِسَاحَةٍ. يَتِمُّتَحْدِيدُ
مَوْقِعِ العُنْصُرِ هُنَا بِالنِّسْبَةِ إِلَى
أَقْرَبِ عُنْصُرٍ أَبَوِيٍّ (Parent) يَمْتَلِكُ
position غَيْرَ static. إِذَا لَمْ يَجِدْ،
سَيَتَحَرَّكُ بِالنِّسْبَةِ لِإِطَارِ الصَّفْحَةِ كُلِّهَا (نافذة العرض).
/* قَاعِدَةٌ ذَهَبِيَّةٌ: الأَبُ يَكُونُ relative وَالاِبْنُ absolute */
.parent {
position: relative; /* حَاوِيَةُ الِارْتِكَازِ */
background-color: lightgray;
height: 200px;
padding: 10px;
}
.child {
position: absolute;
top: 50px;
left: 50px; /* تَعْيِينُ المَوْقِعِ بِالدِّقَّةِ دَاخِلَ الأَبِ */
background-color: lightcoral;
padding: 10px;
}
---
4. خَاصِّيَّةُ fixed (التَّمْوِيعُ الثَّابِتُ)
تُشْبِهُ قِيمَةُ fixed التَّمْوِيعَ المُطْلَقَ فِي أَنَّ
العُنْصُرَ يَخْرُجُ مِنَ التَّدَفُّقِ وَلَا يَشْغَلُ مِسَاحَةً، لَكِنَّ
الِاخْتِلَافَ الجَوْهَرِيَّ هُوَ أَنَّ العُنْصُرَ يَتِمُّ تَعْيِينُ مَوْقِعِهِ
بِالنِّسْبَةِ إِلَى
نَافِذَةِ العَرْضِ لِلْمُتَصَفِّحِ (Viewport) مُبَاشِرَةً.
نَتِيجَةُ ذَلِكَ أَنَّ العُنْصُرَ يَبْقَى ثَابِتًا فِي مَكَانِهِ بِالشَّاشَةِ
حَتَّى لَوْ قَامَ المُسْتَخْدِمُ بِتَمْرِيرِ الصَّفْحَةِ لِلْأَعْلَى أَوْ
الأَسْفَلِ (مِثْلَ أَزْرَارِ الِاتِّصَالِ السَّرِيعِ أَوْ غُرَفِ
الدَّرْدَشَةِ).
/* تَثْبِيتُ شَارَةٍ أَوْ زِرٍّ فِي الزَّاوِيَةِ السُّفْلِيَّةِ لِلشَّاشَةِ */
div {
position: fixed;
bottom: 10px; /* يَبْتَعِدُ 10 بِكْسِلْ عَنِ القَاعِ */
right: 10px; /* يَبْتَعِدُ 10 بِكْسِلْ عَنِ الحَافَّةِ اليُمْنَى */
background-color: lightyellow;
padding: 10px;
}
---
5. خَاصِّيَّةُ sticky (التَّمْوِيعُ اللَّصِقُ)
تُعْتَبَرُ قِيمَةُ sticky مِيزَةً هَجِينَةً ذَكِيَّةً تَجْمَعُ
بَيْنَ الـ relative وَالـ fixed بِنَاءً عَلَى
مَوْقِعِ التَّمْرِيرِ. يَتَصَرَّفُ العُنْصُرُ فِي البِدَايَةِ كَعُنْصُرٍ
طَبِيعِيٍّ (relative)، وَلَكِنْ بِمُجَرَّدِ أَنْ يَصِلَ
المُسْتَخْدِمُ بِالتَّمْرِيرِ إِلَى نُقْطَةٍ مُحَدَّدَةٍ (مِثْلَ أَعْلَى
الشَّاشَةِ top: 0;)، يَتَحَوَّلُ العُنْصُرُ تِلْقَائِيًّا إِلَى
وَضْعِ التَّثْبِيتِ (fixed) وَيَلْتَصِقُ بِالحَافَّةِ، وَهُوَ
مِثَالِيٌّ لِتَنْسِيقِ عَنَاوِينِ الجَدَاوِلِ أَوْ شَرِيطِ القَوَائِمِ.
/* جَعْلُ شَرِيطِ التَّنَقُّلِ يَلْتَصِقُ بِالأَعْلَى عِنْدَ التَّمْرِيرِ */
div {
position: sticky;
top: 0; /* نُقْطَةُ الِالْتِصَاقِ بِمُجَرَّدِ الوُصُولِ لِلْحَافَّةِ العُلْوِيَّةِ */
background-color: lightpink;
padding: 10px;
}
---
جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِخَاصِّيَّةِ Position
لِمَسْحِ الفُرُوقِ الوَظِيفِيَّةِ بَيْنَ جَمِيعِ القِيَمِ بِنَظْرَةٍ بَصَرِيَّةٍ سَرِيعَةٍ:
| القِيمَةُ | الِارْتِبَاطُ المَوْقِعِيُّ (Reference) | حَجْزُ المِسَاحَةِ (Layout) | التَّأَثُّرُ بِالتَّمْرِيرِ (Scrolling) |
|---|---|---|---|
| static | التَّدَفُّقُ الطَّبِيعِيُّ لِلْقَالِبِ. | نَعَمْ (يَحْجِزُ مَكَانَهُ). | يَتَحَرَّكُ مَعَ تَمْرِيرِ الصَّفْحَةِ طَبِيعِيًّا. |
| relative | مَوْقِعُ العُنْصُرِ الأَصْلِيُّ نَفْسُهُ. | نَعَمْ (تَبْقَى مِسَاحَتُهُ فَارِغَةً). | يَتَحَرَّكُ مَعَ تَمْرِيرِ الصَّفْحَةِ. |
| absolute | أَقْرَبُ أَبٍ يَمْتَلِكُ مَوْقِعًا غَيْرَ static. | لَا (يَخْرُجُ مِنَ التَّدَفُّقِ). | يَتَحَرَّكُ مَعَ تَمْرِيرِ الحَاوِيَةِ الخَاصَّةِ بِهِ. |
| fixed | إِطَارُ نَافِذَةِ عَرْضِ المُتَصَفِّحِ (Viewport). | لَا (يَخْرُجُ مِنَ التَّدَفُّقِ). | ثَابِتٌ دَائِمًا وَلَا يَتَأَثَّرُ بِالتَّمْرِيرِ. |
| sticky | مَزِيجٌ بَيْنَ المَوْقِعِ الطَّبِيعِيِّ وَإِطَارِ الشَّاشَةِ. | نَعَمْ (يَحْجِزُ مَكَانَهُ كَعُنْصُرٍ طَبِيعِيٍّ). | يَتَحَرَّكُ طَبِيعِيًّا ثُمَّ يَلْتَصِقُ عِنْدَ المَوْضِعِ المَطْلُوبِ. |
خُلَاصَةٌ
إِنَّ اسْتِيعَابَ آلِيَّةِ عَمَلِ خَاصِّيَّةِ position هُوَ مَا
يُمَيِّزُ مُطَوِّرَ الوِيبِ المُحْتَرِفَ عَنِ المُبْتَدِئِ؛ حَيْثُ تَمْنَحُكَ
هَذِهِ الأَدَوَاتُ القُدْرَةَ عَلَى تَوْجِيهِ النَّوَافِذِ المُنْبَثِقَةِ،
الشَّرَائِطِ العُلْوِيَّةِ، وَالأَيْقُونَاتِ التَّفَاعُلِيَّةِ بِمُرُونَةٍ
مُطْلَقَةٍ. قُمْ بِتَجْرِبَةِ الأَمْثِلَةِ الكُودِيَّةِ السَّابِقَةِ فِي
مَشَارِيعِكَ، وَاخْتَرْ القِيمَةَ التَّصْمِيمِيَّةَ الَّتِي تُلَبِّي هَيْكَلَ
وَاجِهَتِكَ وَتُؤَمِّنُ اِنْسِيَابِيَّةَ التَّصَفُّحِ لِلْمُسْتَخْدِمِينَ.