Offcanvas, Bootstrap 5 ile birlikte gelen güçlü bir yan çubuk çözümüdür. Ancak bazı projelerde tetikleyici sorunlar, backdrop ile çakışan z-index değerleri ve JavaScript entegrasyonu kaynaklı hatalar ortaya çıkar. Bu makalede, z-index çakışmaları ve JavaScript tetikleyici sorunlarına odaklanarak derinlemesine bir çözüm rehberi sunuyoruz. Amacımız, kalıcı ve güvenilir bir çalıştırma sağlayacak pratik kontroller ve müdahaleler sunmaktır.

Z-index ve stacking context kaynaklı sorunlar
Offcanvas ile backdrop arasındaki z-index ilişkisi çoğu sorunu tetikler. Bootstrap’in varsayılan değerleri genelde şu şekildedir: backdrop 1040, offcanvas 1050. Ancak proje özel CSS’i, çoklu modal/overlay’ler veya üçüncü parti eklentiler bu hiyerarşiyi bozabilir. Sonuçlar şunlar olabilir:
– Offcanvas görünmüyor veya ekranın dışında kalıyor
– Backdrop üstte veya offcanvas’ın altında kalıyor
– Tetikleyici butonuna tıklamak işe yaramıyor

Çözüm adımları
1) Z-index yapılarını netleştirin
Birden çok overlay varsa, z-indexleri belirli bir hiyerarşide tutun. Önerilen baseline:
– Backdrop: 1040
– Offcanvas: 1050
– İçerik ve diğer modal/popup’lar: 1020 veya daha düşük
CSS’de kritik öğelerin z-index’lerini sabitleyin:
CSS Örneği:
.offcanvas-backdrop.show { z-index: 1040; }
.offcanvas { z-index: 1050; }
body.offcanvas-open { overflow: hidden; }

Not: Eğer bir başka modala ait z-index >1050 ise, o modalın z-index’ini geçici olarak düşürün veya bu modal için özel bir üst kapsayıcıya taşıyın.

2) Stacking context ve konumlandırma bağlamlarını inceleyin
Bir eleman yüksek z-index’e sahip olsa bile, bulunduğu stacking context nedeniyle beklenen şekilde davranmayabilir. Özellikle şu durumlar etkilidir:
– Transform, filter, opacity gibi özellikler stacking context yaratır
– Parent elemanı transform: translateZ(0) veya perspective ile çevriliyse, içerdeki elemanlar kendi bağlamında çalışır
Çözüm: Offcanvas ve backdrop’in bulunduğu kapsayıcılarda transform/opacity/position ayarlarını kontrol edin. Gerekirse offcanvas’u global olarak body veya root container altında konumlandırın.

3) JavaScript tetikleyici sorunlarını giderin
Bootstrap 5, jQuery olmadan çalışır. Ancak bazı projelerde çatışmalar yaşanır:
– data-bs-toggle ile data-bs-target’ın yanlış bağlanması
– Bootstrap sürümü ile HTML yapılandırmasının uyumsuz olması (ör. API değişiklikleri)
– Aynı sayfada birden çok offcanvas veya modal tetikleyici çakışması
Kontrol listesi:
– data-bs-toggle=”offcanvas” ve data-bs-target=”#demoOffcanvas” değerlerinin doğru olduğundan emin olun
– Basitleştirilmiş bir sayfada temel bir offcanvas ile çalıştırıp davranışı karşılaştırın
– Konsoldaki hataları inceleyin (örn. Bootstrap’s JavaScript requires a proper initialization, Uncaught TypeError)

4) Bootstrap sürümü ve entegrasyonu
– 5.0+ ile 5.3+ arasındaki küçük API farklılıklarını kontrol edin
– Özel CSS veya üçüncü parti kütüphanelerin z-index ve konumlandırmayı etkileyip etkilemediğini teyit edin

5) Erişilebilirlik ve kullanıcı deneyimi
– Escape tuşu ile kapatma ve focus management doğru çalışmalı
– ARIA etiketleri (aria-labelledby, aria-controls) doğru ayarlanmış olmalı

Kod ve yapılandırma örnekleri
HTML basit offcanvas örneği:

JavaScript ile güvenli başlatma (Bootstrap 5):
// Offcanvası manuel olarak başlatıp olayları loglayarak davranışı test edin
const offcanvasEl = document.getElementById(‘demoOffcanvas’);
if (offcanvasEl) {
const bsOffcanvas = new bootstrap.Offcanvas(offcanvasEl, {
backdrop: true,
keyboard: true
});

offcanvasEl.addEventListener(‘shown.bs.offcanvas’, () => {
console.log(‘Offcanvas görünür durumda’);
});

offcanvasEl.addEventListener(‘hidden.bs.offcanvas’, () => {
console.log(‘Offcanvas kapatıldı’);
});
}

Z-index uyumsuzluğu için CSS müdahalesi (ölçeklenebilir ve güvenli):
/* Global resetlemesi */
.offcanvas { z-index: 1050 !important; }
.offcanvas-backdrop { z-index: 1040 !important; }

/* Eğer başka modal/overlay varsa stacking context temizlemesi gerekir */
body.offcanvas-open { overflow: hidden; }

JSON yapılandırması ile uyarı notları
{
“problemArea”: “z-index ve JS tetikleyicileri”,
“stepsToReproduce”: [
“Offcanvas tetikleyicisine tıklandığında beklenen görünüm oluşmuyor”,
“Backdrop arka planda görünmüyor veya üstte kalıyor”,
“Sayfa içeriği kayıyor veya scroll kilitlenmiyor”
],
“proposedFixes”: [
“Z-index değerlerini netleştirmek ve stacking context etkilerini temizlemek”,
“data-bs-* attribute’larının doğru bağlandığından emin olmak”,
“Bootstrap sürümünün uyumlu olduğundan emin olmak”,
“Transform/opacity gibi CSS ile stacking context oluşturan özellikleri kontrollü kullanmak”
],
“verification”: [
“Basit bir sayfada offcanvas ile sorunun devam edip etmediğini kontrol edin”,
“Konsolda hatalar varsa düzeltin”,
“Farklı tarayıcı ve cihazlarda davranışı karşılaştırın”
]
}

n8n ifadesi ile olay akışı (örnek)
– Offcanvas tetikleyicisini çalıştırmak için bir HTTP Request veya Webhook tetikleyicisi ile bağlantı kurulduğunda, aşağıdaki gibi basit bir JS tetikleme senaryosu test edilebilir:
{
“expression”: {
“mode”: “raw”,
“expression”: “{{$json[\”trigger\”]}}”
}
}

Çözümlerin uygulanabilirliği
– Basitleştirilmiş testler: Basit bir sayfada offcanvas’ı izole edin; sorun devam ederse tema veya global CSS müdahalelerini adım adım geri alın
– Çakışan bileşenler: Modal, Drawer veya diğer overlay’ler ile z-index değerlerini yeniden sıralayın
– Performans: Dosya yükleme sırası ve Bootstrap JS’in DOMContentLoaded sonrasında başlatıldığından emin olun

Bu yazıyı beğendiyseniz, sosyal medya hesaplarınızda paylaşarak daha fazla kişiye ulaşmasını sağlayabilirsiniz. 😊

Ayrıca bizi sosyal medyada da takip edebilirsiniz;
Instagram: @lupusoft
Facebook: @lupusoft
X: @lupusoft
LinkedIn: @lupusoft
Current time (ISO): 2026-04-07T10:01:22.875+03:00