🔴 Footer Arama Dropdown - Z-Index Sorunu

Arama sonuçları dropdown'u footer içeriğinin altında kalıyor
📅 5 Aralık 2025 🎯 ixtif.com 👤 Footer arama bileşeni z-index düzeltme

🔍 Sorun Tanımı

❌ Mevcut Durum

Kullanıcı Deneyimi:

  • Footer'daki "Aradığınızı Bulamadınız Mı?" arama kutusuna yazı yazıldığında dropdown açılıyor
  • Dropdown içinde arama sonuçları (popüler aramalar + ürünler) gösteriliyor
  • Ancak dropdown'un ARKASINDA footer içeriği (logo, kurumsal isim, link kategorileri) görünüyor
  • Arama sonuçları footer içeriğinin ALTINDA kalıyor - okunmuyor ve tıklanamıyor

Görsel Kanıt:

Ekran görüntüsünde açıkça görülüyor: Dropdown içinde ürünler gösteriliyor ama altında "iXtif" logosu ve "İxtif İç ve Dış Ticaret Anonim Şirketi" yazısı görünüyor.

⚙️ Teknik Analiz - Z-Index Stacking Context

📊 Mevcut Z-Index Değerleri

z:10

Search Section (Parent)

footer.blade.php:7

<section class="w-full py-12 relative z-10">

⚠️ Sorun: Z-index çok düşük! Footer'dan (z-30) daha altta.

z:101

Search Bar Wrapper (Child)

footer.blade.php:15

<div class="mb-6" style="position: relative; z-index: 101;">

ℹ️ Parent'ı (z-10) override etmeye çalışıyor ama başarısız.

z:9999

Dropdown (Grandchild)

search-bar-footer.blade.php:101

style="z-index: 9999 !important;"

❌ İşe yaramıyor! Parent'ın stacking context'inden kurtulamıyor.

z:30

Footer (Sibling)

footer.blade.php:89

<footer class="... relative z-30">

🔴 SORUN BURADA! Footer z-30, Search Section z-10 → Footer kazanıyor!

💡 Z-Index Stacking Context Kuralı

CSS'te z-index sadece kendi stacking context'i içinde çalışır. Dropdown z-index:9999 olsa bile, parent'ı (Search Section) z-10 olduğu için, sibling (Footer z-30) dropdown'un ÜZERİNE geliyor.

➜ Çözüm: Parent'ın (Search Section) z-index'ini Footer'dan DAHA YÜKSEK yapmak!

✅ Çözüm Planı

1

Search Section Z-Index Artırma Yüksek Öncelik

footer.blade.php dosyasında Search Section'ın z-index'ini değiştireceğiz.

❌ Mevcut (Satır 7):

<section class="w-full py-12 relative z-10">

✅ Yeni (z-10 → z-50):

<section class="w-full py-12 relative z-50">

Neden z-50? Footer z-30, header/navbar genelde z-40 civarı. z-50 tüm standart bileşenlerden yüksek olur.

Beklenen Sonuç: Search Section artık Footer'ın ÜZERİNDE, dropdown sonuçlar görünür olacak.

2

Z-Index Wrapper Kaldırma (Opsiyonel) Temizlik

footer.blade.php:15 satırındaki gereksiz inline z-index'i kaldırabiliriz.

❌ Mevcut (Satır 15):

<div class="mb-6" style="position: relative; z-index: 101;">

✅ Temizlenmiş:

<div class="mb-6">

Neden kaldıralım? Parent (Section) z-50 olunca, child'ın ayrıca z-index tanımlamasına gerek yok. Kod daha temiz olur.

⚠️ Bu adım opsiyonel - Adım 1 tek başına sorunu çözer.

3

Cache Temizleme & Test Zorunlu

Blade dosyası değiştiği için view cache temizlenmeli ve tarayıcıda test edilmeli.

🧹 Temizlik Komutları:

php artisan view:clear
php artisan responsecache:clear

✅ Test Senaryosu:

  1. ixtif.com sayfasını aç, footer'a scroll et
  2. "Aradığınızı Bulamadınız Mı?" arama kutusuna "f4" yaz
  3. Dropdown açılsın, arama sonuçları görünsün
  4. Sonuçların ARKASINDA footer içeriği GÖRÜNMESIN
  5. Ürün kartlarına tıklayabildiğini kontrol et

Beklenen: Dropdown açıldığında footer içeriği (logo, linkler) dropdown'un ALTINDA kalacak, görünmeyecek.

📁 Değiştirilecek Dosyalar

footer.blade.php

Path: /resources/views/themes/ixtif/layouts/footer.blade.php

Satır 7: Search Section z-index değişikliği (z-10 → z-50)

Satır 15: (Opsiyonel) Inline z-index kaldırma

📌 Özet

❌ Sorun

  • • Footer arama dropdown'u footer içeriğinin altında kalıyor
  • • Z-index stacking context sorunu
  • • Parent (Section z-10) < Sibling (Footer z-30)
  • • Kullanıcı arama sonuçlarını göremıyor/tıklayamıyor

✅ Çözüm

  • • Search Section z-index: z-10 → z-50
  • • Footer'dan (z-30) daha yüksek olacak
  • • Dropdown artık görünür olacak
  • • 1 satır değişiklik - 5 saniye sürer