CSS’ de öğeleri istediğimiz gibi konumlandırmak için birkaç yöntem kullanırız.Bunlardan ilk başlığımız floating;
Float özelliği ile nesnelerimizi hizalandırırız.Daha iyi anlamak için 2 div etiketi üzerinden açıklamaya devam edelim.
Div etiketleri default display değerleri block olduğu için şuanda ikisi alt alta hizalanır.Display özelliğine tekrardan değineceğim.
Bu iki Div etiketini yan yana hizalamak için float:left komutunu kullanırız.
Float özelliği başlıca left,right,none olmak üzere farklı değer alabilir.Fotoğraf altındaki codepen.io üzerinden bu değerlerle oynayıp daha da öğrendiklerimizi pekiştirebiliriz.
Şimdi ise bu div etiketlerimizi de kapsayan bir div oluşturup arkaplan için renk verelim ve neler olacak görelim
Gördüğümüz gibi iki divimizi kapsayan , ‘container’ classımıza sahip ana div etiketimizden gelen background:yellow satırı çalışmadı.
Fotoğrafın altındaki codepen linkinden kod satırına gittiğinizde float değerlerini kaldırdığımızda, ana divimizin background renginin ekrana geldiğini görürüz.Bunun sebebi float özelliğini alan nesnelerin akış dışına çıkması olarak adlandırabiliriz.
Peki bu sorunu nasıl çözebiliriz ?
Burada karşımıza 2 yol çıkıyor.İlk yol overflow:auto koduyla taşmaları görünür hale getirmek bizim sorunumuzu çözüyor.
2.yöntem ise taşmaları temizlemek.Akış dışına çıkan nesnelerden sonra clear işlemi yapmak gerekir.Peki bunu nasıl yaparız?
Kullandığımız bu ikinci yöntem , daha yaygın ve güvenilir olarak adlandırılır.
Display Kullanımı
CSS konumlandırma adlı yazımda değinmemiz gereken bir başka ayrı başlık Display.
Display özelliği HTML etiketlerinin nasıl görüneceğini belirler.Kullandığımız <a> etiketi olsun listeler için kullandığımız <li> etiketleri olsun.Bunların default display özellikleri vardır. Li etiketini yazdığımızda her satırın alt alta gelmesi display:block , a etiketini yazdığımızda ekranda yan yana yazmasının sebebi ise display özelliğinin inline olmasıdır.
Biraz özelliklerden bahsedecek olursak inline etiketlere genişlik ve yükseklik veremiyoruz.Bu sebepten dolayı inline etikete background renk vermek istersek sadece yazımızın arkasını kapsar.
Block etiketlerden biri olan <div> etiketi için bir bakalım ;
Block etiketleri için yükseklik ve genişlik değerleri verebiliriz.Bu şekilde bir satırda birden fazla block etiketine yer verebiliriz.
Şimdi her bir divimizin genişliği 200px olarak tanımladık.Toplamda 600px kullandığımız tarayıcının genişliği 600px altına düşerse en son gelen div etiketi bir alt satıra iner.
Tarayıcınızla oynamadan bunu divin yüksekliğiyle gösterelim :)
Evet divin bir block etiketi olduğu öğrendik iyice görmüş olduk.Peki display özelliği belirli olan bir etiketi nasıl değiştireceğiz?
Display özelliğinin aldığı birden çok değer var.Bunlardan başlıca olanları inline,block,inline-block,none.
Default olarak block olan div etiketini inline olarak çevirelim.
Yukarıdaki örneği incelediğinizde bir aksilik görüyor olmanız gerekiyor.
Biz Display:Block özelliğine sahip olan divleri aynı satırda görmek için inline olarak çevirdik.Fakat verdiğimiz yükseklik ve genişlik değerleri çalışmadı.Çünkü inline etiketlere yükseklik ve genişlik değeri veremiyoruz.
Sadece float özelliği verdiğimiz bir nesne direkt olarak block etikete çevrilebilir.Bu şekilde bir div’in display özelliğine inline desek bile float özelliği verirsek ancak bu şekilde yükseklik ve genişlik verebiliriz.Daha fazla kafa karıştırmadan bunu hemen kod üstünde görelim.
Bakın burada float:left dediğim için div etiketlerine hem yüksekliği hem genişlik verebildim.
Peki float özelliğini göz ardı ettiğimizi düşünelim.Bir nesne inline olursa genişlik ve yükseklik veremiyoruz.Block olursa bu seferde yan yana getiremiyoruz.Öğrendiğimiz gibi Block olması tüm satırı kaplamasına sebep oluyor.Eğer ki bu nesnenin display özelliğini Display:inline-block şeklinde değiştirirsek yeni bir çözüm yolu buluruz.Yani display:inline-block olan bir nesne hem inline gibi satırda yan yana gelir hem de bu nesnelere block nesneler gibi yükseklik ve genişlik değerleri verebiliriz.
Display özelliği ile ilgili son bir şey söylemek istersek Display:none özelliği nesnemizi görünmez yapar.
Css’de bir diğer nesneleri konumlandırma yöntemi ise ;
Position kavramı
floating ve display kavramlarını öğrendik bunlarında yetemediği kısımda yardımımıza position özelliği yetişiyor.
Şuana kadar hep nesneler birbiri ardına geldiler yani normal bir akış seyrettiler.Örneğin bir nesneyi bağımsız bir şekilde konumlandırmak istersek yada bir yerde sabit kalmasını istersek Biz bu akışa uymak istemezsek position özelliğini kullanırız.
Diğer özellikler gibi , position’da farklı değerler alabilir.Bunlar başlıca static,relative,fixed,absolute,sticky ‘dir.
Position:Static
Position:static HTML etiketlerinin başlangıç ayarıdır.Yani varsayılanda nasılsa Position:Static etiketiyle de aynı halini sürdürecektir.
Position:Relative
Bir nesnenin position özelliğine relative dersek eğer , nesnenin normal akış içerisinde olduğu yere göre verdiğimiz değerleri uygular.Hemen örnek gösterelim.
Gördüğümüz gibi akışta 2.sırada bir div olduğu için verdiğimiz değerler normal akıştaki yerine göre oldu.
Örneğimizdeki z-index ise hangi nesnenin önde hangi nesnenin arkada olduğunu belirtiyor.
Position:Absolute
Bir nesnenin position özelliğine absolute dersek nesnemiz normal akışın dışına çıkarak verdiğimiz değerlerle kendisini sol üste göre yani sayfanın 0,0 koordinatına göre konumlandırır.
Position Fixed
Bir nesnenin position özelliğine fixed dersek sayfamızda verdiğimiz konuma sabitlemiş oluruz.
Ne kadar lorem atıp sayfanın içeriğini çoğaltsam da position özelliğini fixed yaptığımız bir div her zaman konumlandırdığımız yerde kalacaktır.Bu özelliği en çok menü yapımında kullanırız.
Bu yazıda son değineceğim şey ise
Position:Sticky
Bir nesnenin position özelliğine sticky dersek kaydırma çubuklarını takip eder ve istenilen pozisyon yakalandığında nesneyi o noktada sabitler.Bunu da örnekle gösterelim.
Flexbox ve grid konularını başka bir yazıda ele alacağım.Aldığımda buraya link olarak bırakacağım.
Yeni yeni öğreniyorum.Öğrenirken yazı yazmayı , öğrendiklerini aktararak daha iyi öğrenileceğini bildiğim için bunu yazmak istedim. Kısacası ilk ciddi blog yazım umarım beğenirsiniz. Olumlu olumsuz tüm yorumlarınızı lütfen benimle paylaşın.
Kaynakça : https://sadikturan.com
