CSS ögeler üst üste biniyor

delikarga

Kilopat
Katılım
30 Temmuz 2019
Mesajlar
1.960
Çözümler
27
Merhaba, sayfanın tam ortasında absolute postion ve transform ile bir div yerleştirdim. Bu bir arama çubuğu. Kullanıcılar bir şey yazdığı zaman javascript ile yine element.style.transform = translate(-50%,-200px) şeklinde transition ile yukarı kaydırıyorum bu çubuğu. Buraya kadar bir sorun yok ancak bu işlemden sonra aşağıdaki divin displayini açıyorum (önce gizli). Bunu açınca arama çubuğu bu divin üstünde gözüküyor. Absolute position kullandığım için böyle olduğunun farkıdayım ama çözemedim, nasıl düzelecek? Yardımlarınızı bekliyorum.

Çözdüm galiba. Alttaki divi de absolute position olan divin içine aldım. İkisini birleştirip alltaki dive margin-top atadım. Bu şekilde üst üstte görünmüyolar.
 
Son düzenleme:
Sanırım aradığınız çözüm z-index. Z-index CSS property'si öğelerin z eksenindeki yerini belirler. Yani hangi katmanın hangisinin üstünde, hangisinin altta kalacağını bu property ile belirleyebilirsiniz.

Üstte olmasını istediğiniz elemana z-index: 10; verebilir, altta kalmasını istediğiniz elemana z-index: 1; verebilirsiniz. Hangi elemanın z-index değeri daha yüksekse o daha üstte gözükür z ekseninde. Z-index property'sinin sadece absolute, sticky, relative, fixed ile konumlandırılmış elemanlarda veya flex elemanlarda çalışacağını da söyleyeyim.

Position: static olan bir elemanda hiçbir işe yaramayacaktır yani.
 

Geri
Yukarı