كيف يمكن جعل عنصر صورة يظهر أسفل شريط التنقل باستخدام Bootstrap 5؟

في حال كنت تقصد تثبيت شريط التنقل في أعلى الصفحة ليظهر فوق كافة العناصر يمكنك استخدام الصنف fixed-top كالتالي: 

<nav class="navbar fixed-top ...">
  ...              ^^^^^^^^^
</nav>

أما إذا كنت تقصد فقط إزاحة العنصر أسفل شريط التنقل قم أولا بإضافة الخيار التالي لملف تخصيصات بوتستراب sass لديك 

$enable-negative-margins: true

بعدها يمكنك إضافة مسافة علوية سالبة لعنصر الصورة كالتالي:

<img class="mt-n4 ...">
            ^^^^^

أيضًا في ملفات sass استهدف شريط التنقل ووضع قيمة z-index له عالية بحيث يبقى فوق جميع العناصر مع خاصية position بالقيمة relative، وقيمة z-index للصورة أيضًا أقل منه لضمان وجودها في الأسفل، بشكل يشبه التالي مع تغيير خواص الاستهداف لتناسب العناصر لديك: 

nav {
  position: relative;
  z-index: 999;
}
img {
  z-index: 1;
}

أظن أن هذا يحدث بسبب امتلاك شريط التنقل الوضعية الثابتة position fixed بدون أن يمتلك القسم الحاوي للصورة هامشا علويا كافيا. وبالتالي فإن حاوي الصورة سيتموضع على المحور y ابتداءا من حافة الشاشة من النقطة 0 فيظهر لنا هذا التداخل. 

وبالتالي، ولحل المشكلة سنستخدم أحد الحلين: 

1. ازالة الوضعية الثابتة لشريط التنقل، ويكون ذلك بإزالة الصنف fixed-top بالنسبة لشريط التنقل. وهذا حتى ندع العناصر تتموضع بشكل تلقائي. 
2. الحل الأسهل والأفضل، هو اعطاء حاوي الصورة هامشا علويا كافيا لظهور الصورة. وفي هذا سنحتاج التوجه مباشرة الى الأب المباشر لعنصر الصورة واعطاءه الصنف pt-5 أو pt-4.

   <div class="pt-4">
     <img src="path/to/img.png" />
   </div>

    

تعرف فيما يلي على: 

• تموضع العناصر في إطار العمل Bootstrap.
• أدوات التباعد Spacing في إطار العمل Bootstrap.