Css Konumlandırma

Css konumlandırma, html ögelerinin sayfa içindeki konumunu belirlemek için ve ögelerin çakıştığı durumlarda hangi ögenin üstte veya hangi ögenin altta kalacağını belirlemek için kullanılmaktadır.

Css konumlandırma işlemi 5 farklı konumlandırma bulunmaktadır. Bunlar :

static :Statik konumlandırma
fixed : Sabit konumlandırma
releative : Göreceli konumlandırma
absolute : Mutlak konumlandırma
sticky : Yapışkan Konumlandırma

Bilgi: Konumlandırma (position) özelliği ilk olarak belirlenmelidir. Aksi takdirde kod düzgün bir şekilde çalışmayacaktır.

Css Statik Konumlandırma

Statik konumlandırma varsayılan konumlandırma şeklidir. Html ögelerinin hepsi statik olarak konumlandırılmış yani ögeler yukarıdan aşağıya ve soldan sağa şeklinde konumlandırılır. Ögeler kaydırma çubuğu ile sayfanın normal akışına göre hareket eder.

Css statik konumlandırma özelliği için static değeri kullanılır.

Css Statik Konumlandırma Kullanımı

<style type="text/css">

.statik {

  position: static;
  border-style: dotted;

}
</style>

Css Sabit Konumlandırma

Sabit konumlandırma özelliği sayfada sabit olarak kalmasını istediğimizde kullanılmaktadır. Html ögesi kaydırma çubuğu ile hareket ettirildiğinde sayfada her zaman aynı konumda görünür.

Css sabit konumlandırma özelliği için fixed değeri kullanılır.

Css Sabit Konumlandırma Kullanımı

<style type="text/css">

.sabit {

  position: fixed;
  border-style: dotted;
  float:right;

}
</style>

Css Göreceli (Bağıl) Konumlandırma

Göreceli konumlandırma, normal konumlandırmalara bağlı olarak konumlandırma işlemi yapmak için kullanılır.

Bağıl: Başka bir nesnenin varlığına bağlı olan anlamına gelmektedir.

Css göreceli konumlandırma özelliği için releative değeri kullanılır.

Css Bağıl Konumlandırma Kullanımı

<style type="text/css">

.bagil {

  position: releative;
  border-style: dotted;
  left:50px;

}
</style>

Css Mutlak Konumlandırma

Mutlak konumlandırma, verilen konum özelliklerine göre sayfanın veya ögenin istenen yerine konumlandırma işlemi için kullanılır.

Css mutlak konumlandırma özelliği için absolute değeri kullanılır.

Css Mutlak Konumlandırma Kullanımı

<style type="text/css">

.mutlak{

  position: absolute;
  border-style: dotted;
  float:right;

}
</style>

Css Yapışkan Konumlandırma

Yapışkan konumlandırma, kaydırma çubuğu ile kaydırıldığı anda ekranın en üst kısmına yerleşir.

Css yapışkan konumlandırma özelliği için sticky değeri kullanılır.

Css Yapışkan Konumlandırma Kullanımı

<style type="text/css">

.yapiskan {

  position: sticky;
  border-style: dotted;
  background-color:yellow;
  top:0;

}
</style>

Örtüşen Ögeler Z-index

Üst üste gelen yani örtüşen ögelerin hangisinin üstte veya hangisinin altta olacağını belirlemek için kullanılır.

Css örtüşen ögeleri konumlandırmak için z-index özelliği kullanılır. Z-index özelliğine ait değerler:

z-index : 1 ; = Üstte olmasını istediğimiz ögeye büyük değer
z-index : -1 ; = Altta olmasını istediğimiz ögeye küçük değer verilir.

Örnek 1:


<html>
<head>
<title> Örnek </title>

<style type="text/css">

.kutu1{
position: absolute;

width:500px;
height:500px;

left: 0px;
top: 0px;
background-color:blue;

z-index:-1;
}




</style>

</head>

<body>

<h1> Deneme </h1>
<div class="kutu1"> </div>


</body>

</html>

Örnek 2:


<html>
<head>
<title> Örnek </title>

<style type="text/css">

.kutu1{
position: absolute;

width:500px;
height:500px;

left: 0px;
top: 0px;
background-color:blue;

z-index:-1;
}


.kutu2{
position: absolute;

width:250px;
height:250px;

left: 0px;
top: 0px;
background-color:red;

z-index:1;
}


</style>

</head>

<body>


<div class="kutu1"> </div>
<div class="kutu2"> </div>

</body>

</html>

Önceki Ders: Css Listeler