CSS Position

0 147

CSS Position; HTML elementlerinin diğer elementlere veya ekrana göre konumunu belirlemek için kullanılır. Bir elementi başka bir elementin altına, üstüne, yanına veya arkasına alabilir ve aynı zamanda element fazla büyük olduğunda nasıl davranacağına dahi karar verebiliyoruz. CSS kuralına göre bütün elementler top, bottom, right ve left özelliğine sahip ve kolayca yönetilebilir ancak bunları yönetmenin de belli başlı kuralları vardır. Bunların başında da CSS Position belirlemek geliyor.

CSS Position Özellikleri

CSS Position Özellikleri CSS kullanımında position özelliği birden fazla değer almakta her bir değerin farklı bir kullanımı olduğu gibi her birinin de kullanılacağı yerler vardır. Gelin bunlardan en çok işimize yarayacak 4 tanesini inceleyelim.

  • Static – Özellik belirtilmemiş demektir.
  • Fixed – Sabit, tarayıcıya göre hareket etmeyen element
  • Relative – Normal olması gereken pozisyona göre konum belirlemek
  • Absolute – Koordinat belirleyerek sayfada bir yere yerleştirmek

1.Static

Bir HTML kodu için yazdığımız CSS varsayılan olarak bu değeri taşımakta tabi bu değer değiştirilebilir ve duruma göre değer atanabilir. Static değeri verdiğimizde ya da hiçbir değer vermediğimizde elemanlar sıralı bir biçimde düzeni baz alarak sıralanır.

2.Fixed

Fixed değeri bir elementin tarayıcı ekranında sabitlemek için kullanılır. Element sabitledikten sonra kaydırıcı kullanılsa dahi element yerinde kalır ve hiçbir şekilde kıpırdamadan durur.

p.fixed
   {
      position: fixed;

      top: 30px;
      right: 5px;
   }

Bu yukarıdaki kod çalışıp Position değeri fixed olarak bırakıldığında sahip P elementi sağdan 6 üstten 31 piksel noktasında sabit kalır ve yerinden hareket etmez. Bu değere sahip elementler birbirinin üzerine geçebilir ve birbirlerini kapatabilir.

3.Relative

Bir HTML elementi bulunduğu pozisyondan sağa, sola, aşağıya ve yukarıya şeklinde ayarlamamızı sağlar. Elemanımızın kapladığı alan ve ebatları sistem tarafından değişmez sadece öteleme yapacak bir biçimde yer değiştirir.

h3
   {
      position: relative;

      top: -15px;
      left: -30px;
   }

Yukarıdaki kodda H3 başlığı kullanıldığı konumdan 30 piksel sola kayacak ve yukarıya da 15 piksel kayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.

4.Absolute

Her hangi bir elemana göre ya da eleman yoksa da HTML sayfasına göre bulunacağı konumu piksel olarak ifade ederiz. Örneğin h3 başlığının sayfanın başlangıç noktasının (0,0) 120 piksel sağa ve 175 piksel aşağıya yani (120,175) konumuna taşırız.

  h3
   {
      position: absolute;
      left: 120px;
      top: 175px;
   }

Bu tarz belirlenen pozisyonlar RELATIVE’den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.