Css Position

Merhaba dostlar, bu dersimizde Css ile konumlandırma yani Position özelliğini öğreneceğiz. Css Position özelliğimiz 4 değer almaktadır. Bu değerler; static, relative, absolute ve sticky dir. Şimdi dilerseniz ilk konumuz olan static ile başlayalım.

Css Position Static

Html elementleri varsayılan olarak static konumdadır. Statik konumlandırılmış elemanlar üst, alt, sol ve sağ özelliklerden etkilenmez. Her zaman sayfanın normal akışına göre konumlanır. Aşağıdaki örnek kodumuzu inceleyelim.

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Css Position Relative

Bir Html elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz. Aşağıdaki örneğimizi inceleyelim.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Css Position Absolute

Herhangi bir elemente göre ya da element belirtilmediyse tüm Html sayfasına göre yer alacağı konum piksel olarak ifade edilir. Aşağıdaki örneğimizi inceleyelim.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Oldukça önem arzeden pozisyon özelliğimizdir. Örnekler ile daha rahat anlamazı tavsiye ederim.

Css Position Sticky

Bir Html elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez). Aşağıdaki örneğimizi inceleyelim.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

İşte bu dersimiz bu kadar dostlar. Daha fazla alıştırmalar yaparak koyu çok daha iyi kavrayabilirsiniz. Diğer Bir derste görüşmek dileği ile.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares