CSS de Position (Relative-Absolute)
- Konbuyu başlatan ByArTizZ
- Başlangıç tarihi
Öncelikle şunu söylemek gerekirse relative olmadan absolute bir işe yaramaz. İkisi birbirine bağlantılıdır.
Örnek verelim bir tane <img src="resim"> tag'ının üstüne bir yazı yazıyı getirmek istiyoruz fakat birtürlü getiremiyoruz. O zaman bu resmin bulunduğu dive relative, yapıp üzerine gelecek yazının etiketinide absolute olarak tanımlamalıyız.
yani şöyle bir kodu örnek alalım.
CSS kısmı şu şekilde
absolute'de konumları belirtmek için top,left,bottom,right kullanmamız gerekir. Eğerki bu değerlerin karşılığını 0 verirsek, tam o yöne yönlenir. Örnek verirsek ben top:0; left:0; verdim yani resmin sol üst köşesinde çıkacaktır bu yazı.
Bu olaya içiçe katmanlar deniliyor.
z-index olayına gelirsek, öyle normal projede ne işe yaradığını anlamazsın ama nesne önceliğini belirtir.
Nasıl anlatsam, mesala örnek diyelim, yukarıdan fixed li gelen bir menümüz var diyelim. aşağı doğru inerken normal sitedeki yazı menünün üstüne gelince, yazı menünün üstünde gözüküyor. ama biz o fixedli headere z-index verirsek, menümüz daha öncelikli olacağını söylüyoruz. ve her koşulda menümüz daha ön planda olacak diyoruz.
Şöyle düşün, alt alta gelmiş 7 8 tane kağıt düşün, z-index olmayınca en alttaki kağıt en üstte görünmeye çalışıyo ama sen en üstteki kağıda z-index verip her zaman üstten görünmesini sağlıyorsun olay budur.
Örnek verelim bir tane <img src="resim"> tag'ının üstüne bir yazı yazıyı getirmek istiyoruz fakat birtürlü getiremiyoruz. O zaman bu resmin bulunduğu dive relative, yapıp üzerine gelecek yazının etiketinide absolute olarak tanımlamalıyız.
yani şöyle bir kodu örnek alalım.
CSS kısmı şu şekilde
absolute'de konumları belirtmek için top,left,bottom,right kullanmamız gerekir. Eğerki bu değerlerin karşılığını 0 verirsek, tam o yöne yönlenir. Örnek verirsek ben top:0; left:0; verdim yani resmin sol üst köşesinde çıkacaktır bu yazı.
Bu olaya içiçe katmanlar deniliyor.
z-index olayına gelirsek, öyle normal projede ne işe yaradığını anlamazsın ama nesne önceliğini belirtir.
Nasıl anlatsam, mesala örnek diyelim, yukarıdan fixed li gelen bir menümüz var diyelim. aşağı doğru inerken normal sitedeki yazı menünün üstüne gelince, yazı menünün üstünde gözüküyor. ama biz o fixedli headere z-index verirsek, menümüz daha öncelikli olacağını söylüyoruz. ve her koşulda menümüz daha ön planda olacak diyoruz.
Şöyle düşün, alt alta gelmiş 7 8 tane kağıt düşün, z-index olmayınca en alttaki kağıt en üstte görünmeye çalışıyo ama sen en üstteki kağıda z-index verip her zaman üstten görünmesini sağlıyorsun olay budur.