Css ile web sayfalarında sabit alanlara muhakkak rastlamışsınızdır. Genelde ürün satış ve haber sitelerinde kullanılan bu yöntemde ziyaretçiyi çok rahat bir şekilde ilgili içeriğe odaklandırmaktadır. Ziyaretçi sayfayı ne kadar aşağı veya yana ve diğer yönlere de olabilir çekerse çeksin bizim istediğimiz içerik sürekli olarak ön planda ve sabit olarak kalacaktır. Hemen örneğimize geçelim.

Örneğimizden görüldüğü üzere ben tüm köşelerde sabit alanlar yaptım ki anlaşılması kolay olsun. Css terminolojisinde fixed konumlandırma elementi ile istediğimiz elemanı veya objeyi sabit olarak konumlandırabiliriz. Bunun dışında absolute, relative gibi konumlandırma elementleri de vardır. Kullanacağımız koda gelelim..

Html ve Css kodumuz

/* z-index değerleri ile oynayarak katmanları birbiri altına sokabilirsiniz küçük olan değere sahip olan katman altta kalacaktır. */

div { text-align:center; }

div#govde {
	margin:20px auto 0; /* üst 20px alt 0px sağ-sol otomatik */
	width:990px;
	height:1300px;
	background:url(gradient.png)repeat-x top left;
}

div#yapiskan-alt {
	position:fixed;
	width:100%;
	height:120px;
	background:red;
	z-index:1;
	bottom:0;
	left:0;
}

#yapiskan-ust {
	position:fixed;
	width:100%;
	height:120px;
	top:0;
	left:0;
	background:red;
	z-index:1;
}

#yapiskan-sag {
	position:fixed;
	width:200px;
	height:100%;
	z-index:5; /* aşağıdaki div kalıbının üzerine çıkarttık */
	right:0;
	top:0;
	background:yellow;
	color:#000;
}

#yapiskan-sol {
	position:fixed;
	width:200px;
	height:100%;
	z-index:5; /* aşağıdaki div kalıbının üzerine çıkarttık */
	left:0;
	top:0;
	background:yellow;
	color:#000;
}

<div id="yapiskan-ust">Bu alan sürekli olarak sayfa üstünde görüntülenecek</div>
<div id="yapiskan-sag">Bu alan sürekli olarak sayfa sağında görüntülenecek</div>
<div id="yapiskan-sol">Bu alan sürekli olarak sayfa solunda görüntülenecek</div>
<div id="govde">Bu alan yüksekliğe göre kayacak</div>
<div id="yapiskan-alt">Bu alan sürekli olarak sayfa altında görünecek</div>

• Örneği bu sayfada inceleyebilirsiniz