ForumSevgisi.Com

  ForumSevgisi.Com > ForumSevgisi Sosyal Medya - Teknoloji - Oyun Bölümü > Bilgisayar Ve Donanım


Css Z-index nedir? Nasıl kullanılır?


Css Z-index nedir? Nasıl kullanılır?

ForumSevgisi Sosyal Medya - Teknoloji - Oyun Bölümü Kategorisinde ve Bilgisayar Ve Donanım Forumunda Bulunan Css Z-index nedir? Nasıl kullanılır? Konusunu Görüntülemektesiniz,Konu İçerigi Kısaca ->> Css Z-index nedir? Nasıl kullanılır? CSS’e gelen yeniliklerle birlikte her geçen daha kullanıcı dostu, daha kaliteli siteler kurmaya başlıyoruz. Yıllardan ...

Kullanıcı Etiket Listesi

Yeni Konu aç  Cevapla
LinkBack Seçenekler Stil

Okunmamış 06 Mayıs 2016, 21:53   #1
Durumu:
Çevrimdışı
BuRHaN - ait Kullanıcı Resmi (Avatar)
Meskul
Üyelik tarihi: 25 Ekim 2014
Şehir: İstanbul
Yaş: 28
Mesajlar: 18.971
Konular: 8858
Beğenilen: 3250
Beğendiği: 2339
www.forumsevgisi.com
Standart Css Z-index nedir? Nasıl kullanılır?

Css Z-index nedir? Nasıl kullanılır?

CSS’e gelen yeniliklerle birlikte her geçen daha kullanıcı dostu, daha kaliteli siteler kurmaya başlıyoruz. Yıllardan beri gelen alt alta, yanyana yapılan kutucukları da CSS in bir elementi sayesinde değişime uğratıyoruz.

2D düzlemde X ve Y vardır. Bunlardan biri yatay diğeri de dikey düzlemdir. Z ise işin 3D olan kısmını ekleyip, karşıdan baktığımızda Ön ve arkada olan kutucukların görünümünü bize veriyor.

CSS’teki gelişmeyle birlikte eskiden yaptığımız gibi div leri sağa sola yaslayıp, yan yana dizmek artık işimize çokta gelmiyor.

Bu yüzden Z-index ortaya çıktı ve bize divleri sanki Photoshoptaki Katmanlarmış gibi üst üste koymamızı sağladı.

Bunu daha iyi anlamak için aşağıdaki şemaya bakınız.



Z-index z ekseninde 3d düzlemde üst üste, alt alta divleri yerleştirmemizi sağlıyor. Z-index’i kullanabilmemiz için öncelikle position özelliği doğru olarak vermemiz gerekiyor aksi halde z-index değeri çalışmayacaktır.

Bunu bir örnekle açıklamak gerekirse iki tane div’imiz olsun. Bunlara div1 ve div2 diyelim.



Şimdi bunların üst üste olmasını istiyoruz. İlk önce HTML kodumuzu yazalım.

Kod:
        .content {width:500px;height:500px;background:#fff;margin:100px auto;position:relative;}
.div1 {width:150px;height:150px;background:#c1c0bd;position:absolute;left:10px;top:10px;}
.div2 {width:125px;height:105px;background:#ffcdba;position:absolute;left:50px;top:20px;}

Bu CSS kodlarımızı da ekledikten sonra ortaya çıkan sonuç üst üste geçmiş 2 Div olmalı. Burada önemli olan Position değerinin absolute olarak verilmesi. Onun dışında left ve top değerlerine istediğimiz rakamı vererek div lerin content div i üstünde ona göre yerleşmesini sağlayabiliriz.



Div’leri üst üste getirdik ama biz Z-index kullanmadık. Biz Div2’nin Div1’in altında olmasını ve sadece sağ ucunun görünmesini istiyoruz. Şimdi CSS kodumuza z-index değerlerimizi ekleyelim.

Kod:
        .content {width:500px;height:500px;background:#fff;margin:100px auto;position:relative;}
.div1 {width:150px;height:150px;background:#c1c0bd;position:absolute;left:10px;top:10px;z-index:2;}
.div2 {width:125px;height:105px;background:#ffcdba;position:absolute;left:50px;top:20px;z-index:1;}

Kodu bu şekilde değiştirdiğimizde sonuç aşağıdaki gibi olacaktır.



Gördüğümüz üzere Z-index değeri verildiği takdirde Div’ler tamamen yer değiştirdiler. Sanırım Z-index ve position elementlerinin nasıl kullanıldığı hakkında aklımızda bir fikir oluştu. Bir sonraki konuya kadar Sağlıcakla Kalın.



Alıntı ile Cevapla
Yeni Konu aç  Cevapla

Etiketler
css, kullanilir, nasil, nedir, z-index, zindex

Seçenekler
Stil


Saat: 13:41

Forum Yasal Uyarı
vBulletin® ile Oluşturuldu
Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.

ForumSevgisi.Com Her Hakkı Saklıdır
Tema Tasarım:
Kronik Depresif


Sitemiz bir 'paylaşım' sitesidir. Bu yüzden sitemize kayıt olan herkes kontrol edilmeksizin mesaj/konu/resim paylaşabiliyorlar. Bu sebepten ötürü, sitemizdeki mesaj ya da konulardan doğabilecek yasal sorumluluklar o yazıyı paylaşan kullanıcıya aittir ve iletişim adresine mail atıldığı taktirde mesaj ya da konu en fazla 48 saat içerisinde silinecektir.

izmir escort istanbul escort, Ankara escort, Ankara escort, Ankara escort, Ankara escort, porno izle, sex izle, porno izle, escort bayan, ankara escort bayan, ankara escort, istanbul escort, antalya escort,