1. Anasayfa
  2. Css

Css Dersleri – Konumlandırma (Position)

Css Dersleri – Konumlandırma (Position)
0

Css derslerimize Konumlandırma (Position) ile devam ediyoruz, Sayfa içerisinde herhangi bir nesnenin nerede olacağını belirleme işlemine konumlandırma denir bu işlem için Kullanacağımız Dört parametre var bunlar;

  • static
  • fixed
  • relative
  • absolute

layers-300x225
Şimdi sırayla nasıl position özelliklerini örnekler üzerinde açıklamaya başlayalım
Not..:Css’de konumlandırma position kullanılırken sayfanın sol üst köşesi başlangıç noktası olarak alınır diğer bütün nesneler buna göre sayfaya yerleşir.

1-Static
Css’in standart konumlandırma parametresidir. siz herhangi bir özellik belirtmediğiniz zaman bu değer otomatik olarak alınır ve sayfayı akışına bırakır :) nesneler soldan başlayarak sayfaya eklenir.

2-fixed
Sayfaya eklenecek herhangi bir nesnenin sayfada belirtilen konuma sabitlenmesi için kullanılır. Kaydırma çubukları ile sayfa aşağı yukarı hareket etse bile nesne belirtilen konumda sabit kalır

Kullanım

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimogretmeni.com</title>
<style type="text/css">
.sabitle 
/*Sayfanın sağından 5px üstünden 
30px boşlukta bir nesneyi sabitliyoruz*/
{
position:fixed;
top:30px;
right:5px;
}
body
{
height:1200px;
}
</style>
</head>
<body>
<img  class="sabitle"src="http://www.bilisimogretmeni.com/wp-content/themes/bilisimogretmeni/images/llogo.png"/>
Sayfayı Aşağı Doğru Kaydır
</body>
</html>

[wp-js-fiddle url=”http://jsfiddle.net/ovwd8tov/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

3-Relative
Sayfada bir nesneye relative özelliği verildiği zaman bu kendisinden sonra gelecek nesnelere başlangıç noktası olarak sol üst köşesini gösterir ve o nesneyi sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar.
Relative konusu ile örneği aşağıda absolute ile beraber anlatacağım

4-absolute
Sayfa içerisinde bir nesneyi verdiğiniz koordinatlara göre konumlandırmak için kullanılır. Alt alta positon:absolute kullanılır ise ikinci absolute birinciyi başlangıç olarak alır. Sayfanın Dört köşesine nesne yerleştirme işlemi için aşağıda absolute kullanım örneği.
Kullanım

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimogretmeni.com</title>
<style type="text/css">
#kutu_1 { 
			position: absolute;
		 	top: 0;
		 	left: 0;
		 	width: 200px;
		 	height: 200px;
			background: #ee3e64;
		}
		#kutu_2 { 
			position: absolute;
		 	top: 0;
		 	right: 0;
		 	width: 200px;
		 	height: 200px;
			background: #44accf;
		}
		#kutu_3 { 
			position: absolute;
		 	bottom: 0;
		 	left: 0;
		 	width: 200px;
		 	height: 200px;
			background: #b7d84b;
		}
		#kutu_4 { 
			position: absolute;
		 	bottom: 0;
		 	right: 0;
		 	width: 200px;
		 	height: 200px;
			background: #ebde52;
		}
</style>
</head>
<body>
<div id="kutu_1"></div>
	<div id="kutu_2"></div>
	<div id="kutu_3"></div>
	<div id="kutu_4"></div>
</body>
</html>

[wp-js-fiddle url=”http://jsfiddle.net/yu1fbtww/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

Bu İçeriğe Tepkin Ne Oldu?
  • 1
    ba_ar_l_
    Başarılı
  • 0
    gayet_yi
    Gayet İyi
  • 0
    te_ekk_rler
    Teşekkürler
  • 0
    anlamad_m
    Anlamadım
  • 0
    yetersiz
    Yetersiz
İlginizi Çekebilir
Subscribe
Bildir
guest

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

0 Yorum
Inline Feedbacks
View all comments