CSS position (konumlandırma) Özelliği Nedir ve Nasıl Uygulanır?
CSS position (konumlandırma) özelliği web sayfalarındaki elemanların konumları ile değişiklik yapma imkanı verir. Genel yapısı aşağıdaki gibidir.
Yapısı: position: <deger>
Aldığı Değerler: static | relative | absolute | fixed | inherit
Başlangıç Değeri: static
Uygulanabilen Elemanlar: Tüm elemanlar
Kalıtsallık: Yok
Üst, sağ, alt ve sol (top, right, bottom, left)
Yukarıda tanımladığımız konumlandırma özelliklerinden relative, absolute ve fixed değerini alan elemanlar üst, sağ, alt ve sol özelliklerine bağlı olarak konumlandırılırlar.
Yapısı: top, right, bottom, left: <deger>
Aldığı Değerler: <uzunluk> | <yüzde> | auto | inherit
Başlangıç Değeri: auto
Uygulanabilen Elemanlar: postion uygulanan elemanlara
Kalıtsallık: Yok
Göreceli Konumlandırma (position:relative)
Bir elemana göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elemanın (göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebiliriz. Eğer biz elemanın üst (top) değerine 20px tanımlarsak eleman bulunduğu yerden 20px aşağıya kayacaktır. Eğer elemanın sol (left) değerini 20px olarak tanımlarsak elemanımız soldan 20px sağa doğru kayacaktır.
p#ornek
{
position: relative;
left: 50px;
top: 50px;
}
Göreceli konumlandırma kullanılarak yeri belirlenen bir elemanın başlangıçtaki konumundaki boşluğu ve diğer elemanlarla arasındaki mesafeyi koruyacaktır.
Mutlak Konumlandırma (position:absolute)
Göreceli konumlandırma normal akışın bir parçasıdır. Aksine mutlak konumlandırmada uygulanan eleman bulunduğu yere boşluk bırakmayacaktır. Diğer elemanlar normal akıştaki yerlerini bu elemanı yok sayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi mutlak konumlandırılmış elemanın konumu en yakındaki üst elemanın konumuna bağlıdır. Eğer bir ata elemanın konumu belirlenmemişse elemanımız ana bloğa göre konumlanacaktır. Mutlak konumlandırma HTML elemanı ve sayfa çözünürlüğü ile ilişkilidir. Göreceli olarak konumlandırılmış bir elemanın içindeki mutlak konumlandırılmış bir eleman içerik bloğunun üst, sağ, sol ve altından hizalandırılabilir. Bu kullanım bize birçok uygulamada yardımcı olacaktır ve bu kullanım ile çok güzel sonuçlar elde edeceğiz. İnsanların konumlandırma ile ilgili genel problemleri hangi konumlandırma seçeneğinin ne işe yaradığını unutmalarıdır. Göreceli konumlandırma sayfadaki elemanın başlangıç durumuna göre göreceli bir durumda olduğunu, oysa mutlak konumlandırmanın en yakın ata elemana veya içerik bloğuna göre göreceli değer içerdiğidir. Mutlak konumlandırma ile yerleştirilmiş eleman sayfada elemanı normal akışın dışına çıkarır. Bu eleman diğer elemanların üzerine binecektir. Bu üstte kalma altta kalma işini de z-index özelliği ile hallede biliriz. z-index değeri büyük olan eleman üstte küçük olan eleman ise altta kalacaktır. Örneğin geniş bir blok içindeki bir paragraftaki yazıların sağ ve altta olmasını istiyorsak. Dıştaki içerik kutusunu göreceli konumlandırıp içindeki paragrafı mutlak konumlandırarak bu isi halledebiliriz.
#adresler
{
width: 700px;
height: 100px;
position: relative;
}
#adresler .tel
{
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}
<div id="adresler">
<p class="tel">Tel: 0845 838 6163</p>
</div>
Sabit Konumlandırma (position:fixed)
Sabit konumlandırma mutlak konumlandırmanın bir alt kategorisidir. Sabit konumlandırılmış elemanın sayfadaki görünümü çok farklıdır. Bunu özellikle web sayfasında bir elemanın konumunu sabitlemek için kullanabiliriz. Sabit konumlandırma ile yerleştirilmiş eleman belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile sabit konumlandırma ile yerleştirilmiş elemanın yeri değişmeyecektir ve sabit kalacaktır. Sabit konumlandırmayı sayfanın belli bir alanını sabitleyip diğer alanları bu kısmın yanından, altından kaydırmak için kullanırız genelde.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
div#ustKisim
{
position:fixed;
background: gray;
color: yellow;
height:50px;
width:100%;
top:0;
left:0;
}
div#icerik
{
margin:75px 0 0 0;
}
</style>
</head>
<body>
<div id="ustKisim">Lorem ipsum dolor sit amet</div>
<div id="icerik">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec erat. Fusce magna massa, nonummy eget, aliquam tempus, imperdiet vel, odio. Sed mauris. Quisque sodales urna vitae lorem. Vestibulum aliquet, odio aliquam convallis lobortis, turpis metus semper ligula, ut vulputate sem justo eu quam. Sed feugiat, lectus sit amet porttitor auctor, nulla odio volutpat nisl, sit amet egestas augue diam at urna. Sed justo arcu, luctus eget, porta in, auctor sit amet, massa. Integer interdum. Nunc condimentum scelerisque enim. Pellentesque orci.
Maecenas at neque. Sed non diam ac turpis pretium dictum. Phasellus ligula felis, aliquet nec, tristique non, posuere a, magna. Duis eu quam quis tortor vehicula sodales. Donec et mi eget augue bibendum interdum. Proin dapibus odio.</p>
</body>
</html>
CSS position (konumlandırma) özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
