position Özelliği

position özelliği, elementlerin konumlandırma yöntemini belirler. Bu özellik en çok üstten, sağdan, alttan ve soldan sırasıyla boşlukları ayarlayan top, right, bottom, left özellikleri ile birlikte kullanılır.

Sözdizimi

seçici {
	position: absolute | relative | fixed | static | sticky;
}

position için Değerler

Değer	Açıklama
`absolute`	Mutlak konumlandırma. Element, normal belge akışından çıkarılır ve (en varsa) en yakın konumlandırılmış üst öğeye göre veya tarayıcı penceresine göre konumlandırılır.
`relative`	Göreli konumlandırma. Element, belge akışındaki normal konumuna göre kaydırılır, ancak kapladığı alan rezerve edilmiş olarak kalır.
`fixed`	Sabit konumlandırma. Element, normal belge akışından çıkarılır ve tarayıcı penceresine göre konumlandırılır. Sayfa kaydırıldığında yerinde kalır.
`static`	Statik konumlandırma. Bu değer, konumlandırma olmadığı anlamına gelir ve element normal şekilde davranır.
`sticky`	Yapışkan konumlandırma. Element, kaydırma sırasında belirlenmiş bir konuma ulaşana kadar `relative` gibi davranır, daha sonra belirtilen yere yapışır (`fixed` gibi).

Varsayılan değer: static.

Örnek . Mutlak Konumlandırma

Elementi ekranın sol üst köşesine küçük boşluklarla yerleştirelim:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Örnek . Mutlak Konumlandırma

Şimdi elementi ekranın sağ üst köşesine küçük boşluklarla yerleştirelim:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Örnek . Sabit Konumlandırma

Sabit konumlandırmada element kaydırma sırasında yerinde kalacaktır:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Örnek . Göreli Konumlandırma

Göreli konumlandırmada element, normal konumuna göre kaydırılır, ancak diğer elementler, element kaydırılmamış gibi davranır:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Örnek . İç İçelik

Eğer üst öğenin position özelliği relative değerine sahipse, o zaman mutlak konumlandırılmış elementler üst öğeye göre konumlandırılacaktır:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Örnek . İç İçelik

Eğer üst öğenin position özelliği absolute değerine sahipse, o zaman mutlak konumlandırılmış elementler üst öğeye göre konumlandırılacaktır:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Örnek . Yapışkan Konumlandırma

Bir elementin position özelliği sticky değerine sahipse, element kaydırma sırasında belirlenmiş bir konuma ulaşana kadar relative gibi davranır, daha sonra yere yapışır. Yapışkan bir başlık yapalım:

<h1>Ana Site Başlığı</h1>

<div class="header">başlık başlık başlık</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Örnek . Konumsuz

Eğer bir elemente konum belirtilmeden mutlak konumlandırma verilirse, element konumlandırma olmadan durduğu yerde kalacak, ancak diğer elementler onu fark etmeyecektir:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Örnek . Tek Eksen

Mutlak konumlandırmada konum sadece bir eksende belirtilebilir. Örneğin, top özelliğini belirlersek, dikeyde element istenen konuma yerleşecek, yatayda ise durduğu yerde kalacaktır:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Örnek . Tüm Konumlar

Mutlak konumlandırmada genişlik ve yükseklik belirtmeden tüm taraflardan konum belirtilebilir. Bu durumda element üst bloğun ortasına yerleşecektir:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Ayrıca Bakınız

elementlerin üst üste gelmesini ayarlayan z-index özelliği