Yazar: Merhaba değerli web tasarım meraklıları!
Bu yazımda sizlere css position kullanımından ve alabileceği değerlerinden bahsedeceğim.
Position ile ilgili tüm bildiklerimi detaylı bir şekilde sizlere örneklerle anlatmaya çalışacağım.
Css position özelliği html sayfasında bir nesneyi konumlandırmak ve bilirli bir hareket özelliği kazandırmak için kullanılmaktadır.
Position özelliğinin alabileceği en önemli dört değer vardır, bu değerlere detaylı bir şekilde bakalım:
Css position static özelliği:
Css position özellikleri içerisinde ilk olarak ele alacağımız değer static değeridir.
Position static özelliğinde html nesnelerinin konumları ve davranış biçimleri değiştirilemez. bir sayfada yer alan nesnelerin konumlarını değiştirmeyecekisek static değerini kullanabiliriz.
Css position relative özelliği:
Bir nesneyi konumlandırmak için position-relative özelliğini kullandığımızda bottom, top, right, left gibi değerler alırlar.
Yukarıdaki değerler ile nesneleri konumlandırabiliriz.
Css position absolute özelliği:
Bir nesnenin position özelliğini absolute olarak belirlediğimizde o nesne normal akış içerisinden çıkar ayrıca 4 köşeden konumlandırma yapmamızı sağlar.
Relative özelliği ve absolute özelliği arasındaki temel fark normal akış içerisinde olup olmadığıdır. konumlandırma yapmak için yine aynı şekilde bottom, top, right, left değerlerini alırlar.
Css position fixed özelliği:
Css fixed’ in ne olduğunu anlamak için ilk olarak html’ de sıklıkla duyduğumuz viewport kavramınının ne olduğunu ve hangi amaçla kullanıldığını bilmemiz gerekir.
Viewport: Sayfanın o anki görüntü alanına viewport denir. Yani 1200px’ lik toplam yüksekliğe ve 800px genişliğe sahip olan bir web sitesinin küçük bir tarayıcıda açıldığını düşünelim ve bu tarayıcı bize sitenin sadece 600px lik yükseklik ile 400px’ lik genişliğini gösterebiliyorsa o tarayıcının viewport’ u 600 x 400 px diyebiliriz.
Viewport’ un ne olduğunu anladıktan sonra position fixed ‘in ne olduğunu daha iyi anlayabiliriz. Tarayıcının viewport’ una bağlı olarak sabit bir yerde konumlanan nesneler oluşturmak istiyorsak position fixed kullanmamız gerekmektedir.
Tarayıcının viewport’ una bağlı olarak derken kastedilen yatay ve dikey kaydırma çubuklarının kullanılmasına rağmen nesnenin konumu hep sabit kalmasındandır. Bizim için başlangıç noktası o anki viewport’ dur.
Konumlandırma yaparken alabileceği değerleri aşağıda görebilirsiniz
top : nesnenin üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.
left : nesnenin sol kısımdan kaç piksel aşağıda olması gerektiğini belirler.
width : nesnenin genişliğinin kaç piksel olacağını belirler.
height : nesnenin boyunun kaç piksel olacağını belirler.
clip : nesnenin görünmesi istenen bölgeyi içeren kutucuk.
overflow : nesnenin belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
scroll : Kaydırma çubukları ekler.
visibility : nesneye görünebilirlik ayarı yapar
visible : Görünür hale getirir.
hidden : Gizler.
z-index : nesnenin sayfa üzerindeki sıra sayısını belirler.
right : nesnenin sağ kısımdan kaç piksel aşağıda olması gerektiğini belirler.
bottom: nesnenin alt kısımdan kaç piksel aşağıda olması gerektiğini belirler.
Bu dört özelliği ele aldıktan sonra örnekler yaparak konuyu detaylandıralım.
örnek 1:
<html>
<head>
<title> css position örnek 1 </title>
<style type=”text/css”>
div {
position:absolute;
top:20px;
left:10px;
width:200px;
height:200px;
clip:auto;
overflow:scroll;
z-index:auto;
visibility:visible;
}
</style>
</head>
<body>
<div>
css position absolute özelliği <br>
html <br>
css br>
bootstrap <br>
javascript <br>
</div>
</body>
</html>
örnek2:
<div class=”fixed”>
This element has position: fixed;
</div>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 4px solid black;
}
İki örneğimizde absolute ve fixet özelliğini kullanarak farklı örnek oluşturduk. position yani konumlandırma oldukça önemli bir konu olduğundan mutlaka tekrar tekrar okuyup bu konuyu iyice pekiştirmeniz gerekmektedir.
Css position ile ilgili soru ve sorunlarınızı yorum olarak bana iletebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css list özellikleri ve kullanımı başlıklı makalemizde css list kullanımı, css list özellikleri ve css list tanımlamaları hakkında bilgiler verilmektedir.