CSS Konumlandırma – position Kullanımı – Yazılım Bilişim Programlama

CSS ile ilgili en iyi şeylerden biri, içeriği ve öğeleri bir sayfada neredeyse akla gelebilecek herhangi bir şekilde konumlandırıp tasarım yapmamıza ve içeriği daha etkin ve güzel sunma yeteneği sağlamasıdır.

CSS içinde birkaç farklı konumlandırma türü vardır ve her biri kendi özel uygulamasına sahiptir. Bu bölümde, birkaç farklı kullanım durumuna göz atacağız.

position Özelliği

position Özelliği, bir element için kullanılan yerleştirme yöntemi türünü belirtir. Beş farklı konumlandırma değeri vardır;

static
relative
fixed
absolute
sticky

position : static ;

Varsayılan olarak her elemanın position değeri static olarak konumlandırılır, yani belgenin normal akışında varolduğu ve herhangi bir kutu ofset özelliğini kabul etmediği anlamına gelir. Statik konumlu elemanlar her zaman sayfanın normal akışına göre kendi görüntülenme biçiminde konumlanırlar.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        position: static;
        border: 3px solid #73AD21;
    }
</style>
</head>
<body>

<h2>CSS static Konumlandırma</h2>

<p>Bu paragraf blok öğesi olup standart konumlandırmaya sahiptir.</p>

<div>Bu div öğesi static konumlandırmaya sahiptir. Akışını bozmaz.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

position: static;

border: 3px solid #73AD21;

}

</style>

</head>

<body>

<h2>CSS static Konumlandırma</h2>

<p>Bu paragraf blok öğesi olup standart konumlandırmaya sahiptir.</p>

<div>Bu div öğesi static konumlandırmaya sahiptir. Akışını bozmaz.</div>

</body>

</html>

position : relative ;

Nispeten konumlandırılmış bir öğenin görüntüleme konumunu, kutu ofset özellikleri ile değiştirilmesini sağlar.

top (üst), right(sağ), bottom(alt) ve left(sol) özelliklerini kullanarak HTML öğesini sayfanın istenilen pozisyonuna konumlanmasını sağlayabilirsiniz. Ancak bu durum öğenin normal konumundan uzaklaşmasına neden olur. Diğer içerikler ise , öğenin bıraktığı boşluklara uyacak şekilde ayarlanamayacaktır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div.bir {
        position: relative;
        left: 30px;
        border: 3px solid #73AD21;
    }
    div.iki{
        left: 300px;
        border: 3px solid red;
    }
</style>
</head>
<body>

<h2>CSS relative Konumlandırma</h2>

<p>Bu paragraf static konumlandırmaya sahiptir.</p>

<div class="bir">
Bu div öğesi relative konumlandırılmıştır.
</div>

<div class="iki">Bu sonraki div öğesi normal akışında devam eder.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.bir {

position: relative;

left: 30px;

border: 3px solid #73AD21;

}

div.iki{

left: 300px;

border: 3px solid red;

}

</style>

</head>

<body>

<h2>CSS relative Konumlandırma</h2>

<p>Bu paragraf static konumlandırmaya sahiptir.</p>

Bu div öğesi relative konumlandırılmıştır.

</div>

<div class="iki">Bu sonraki div öğesi normal akışında devam eder.</div>

</body>

</html>

Örnek;

Örnek uygulamamızda “Kutu2” diğerlerinden farklı olarak “relative” olarak konumlandırılmıştır. “left” özelliği ile soldan, “top” özelliği ile olması gereken yerden “50px” mesafe bırakılmıştır. Olması gereken noktadan ötelenen <div> öğesi göreceli (relative) konumuna yerleşirken diğer öğeler (kutu1, kutu3) sayfa akışındaki yerlerini korumuşlardır.


<!DOCTYPE html>
<html>
<head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 3px solid #73AD21;
    }
    
    div.iki{
        position: relative;
        left: 50px;
        top: 50px;
        border: 3px solid red;        
    }    
</style>
</head>
<body>

<h2>CSS relative Konumlandırma</h2>

<div class="bir">Kutu 1</div>
<div class="iki">Kutu 2</div>
<div class="uc">Kutu 3</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

border: 3px solid #73AD21;

}

div.iki{

position: relative;

left: 50px;

top: 50px;

border: 3px solid red;

}

</style>

</head>

<body>

<h2>CSS relative Konumlandırma</h2>

</body>

</html>

position : fixed ;

position : fixed değeri uygulanan HTML öğesi görüntü kaydırma çubuğuna göre konumlandırılır; bu, sayfa kaydırılmış olsa bile her zaman sabit olarak aynı yerde kalması demektir. top (üst), right(sağ), bottom(alt) ve left(sol) özelliklerini kullanarak HTML öğesini sayfanın istenilen pozisyonuna sabit konumlanmasını sağlayabilirsiniz. Sabit bir öğe, normalde bulunduğu sayfada boşluk bırakmaz. Uygulanan öğe normal akışın dışına çıkar. Bunun anlamı sayfada bulunan diğer öğeler, sabit konumlanmış öğeyi yok sayarlar. Sabit konumlandırmayı sayfanın belli bir alanını sayfa akışının dışına çıkarıp bir noktada sabitlemek maksadıyla kullanırız.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    img{
        position: fixed;
        right: 20px;
        bottom: 20px;
    }
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>
Lorem Ipsum Nedir?

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Neden Kullanırız?

Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.

Nereden Gelir?

Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.

1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.
Nereden Bulabilirim?

Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir. İnternet'teki tüm Lorem Ipsum üreteçleri önceden belirlenmiş metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum üreteci yapar. Bu üreteç, 200'den fazla Latince sözcük ve onlara ait cümle yapılarını içeren bir sözlük kullanır. Bu nedenle, üretilen Lorem Ipsum metinleri yinelemelerden, mizahtan ve karakteristik olmayan sözcüklerden uzaktır.</p>


<img src="Plus.png">


</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

img{

position: fixed;

right: 20px;

bottom: 20px;

}

</style>

</head>

<body>

<h2>position: fixed;</h2>

<p>

Lorem Ipsum Nedir?

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

Neden Kullanırız?

Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.

Nereden Gelir?

Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.

1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.

Nereden Bulabilirim?

Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir. İnternet'teki tüm Lorem Ipsum üreteçleri önceden belirlenmiş metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum üreteci yapar. Bu üreteç, 200'den fazla Latince sözcük ve onlara ait cümle yapılarını içeren bir sözlük kullanır. Bu nedenle, üretilen Lorem Ipsum metinleri yinelemelerden, mizahtan ve karakteristik olmayan sözcüklerden uzaktır.</p>

</body>

</html>

position : absolute ;

absolute konumlandırma tıpkı fixed konumlandırma gibi HTML öğesini sabit bir noktada konumlandırmak için kullanılır. Tek farkı absolute konumlandırılmış öğe kendisini kapsayan bir üst öğeye göre pozisyonunu almaktadır. top (üst), right(sağ), bottom(alt) ve left(sol) özelliklerini kullanarak HTML öğesini onu kapsayan üst öğenin istenilen herhangi bir pozisyonuna sabit konumlanmasını sağlayabilirsiniz. Uygulanan öğe normal akışın dışına çıkacaktır.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div.relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 3px solid green;
    } 

    div.absolute {
        position: absolute;
        top: 80px;
        right: 20px;
        width: 200px;
        height: 100px;
        border: 3px solid red;
    }
</style>
</head>
<body>

<h2>CSS absolute Konumlandırma</h2>

<div class="relative">Bu div öğesi relative konumlandırılmıştır.
  <div class="absolute">Bu div öğesi absolute konumlandırılmıştır.</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

position: relative;

width: 400px;

height: 200px;

border: 3px solid green;

}

div.absolute {

position: absolute;

top: 80px;

right: 20px;

width: 200px;

height: 100px;

border: 3px solid red;

}

</style>

</head>

<body>

<h2>CSS absolute Konumlandırma</h2>

<div class="relative">Bu div öğesi relative konumlandırılmıştır.

<div class="absolute">Bu div öğesi absolute konumlandırılmıştır.</div>

</div>

</body>

</html>

position : sticky ;

sticky kullanıcının kaydırma konumuna dayalı olarak konumlandırma yapar. sticky uygulanmış bir öğe kaydırma konumuna bağlı olarak relative ve fixed konumlandırmalar arasında geçiş yapar. Görünüm alanında belirli bir ofset konumu sağlanıncaya kadar relative olarak konumlandırılır – daha sonra fixed gibi sayfa kaydırılsa bile öğe sabit bir konumda durur.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    div.sticky {
      position: -webkit-sticky; /*safari*/
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
</style>
</head>
<body>

    <h1>CSS sticky Konumlandırma</h1>

    <div class="sticky">sticky Konumlandırılmış bir div</div>

    <div style="padding-bottom:2000px">
      <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
      <p>1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.</p>
    </div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.sticky {

position: -webkit-sticky; /*safari*/

position: sticky;

top: 0;

padding: 5px;

background-color: #cae8ca;

border: 2px solid #4CAF50;

}

</style>

</head>

<body>

<h1>CSS sticky Konumlandırma</h1>

<div class="sticky">sticky Konumlandırılmış bir div</div>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>

<p>1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.</p>

</div>

</body>

</html>

z-index Nedir?

relative, absolute, fixed türü konumlandırmalar top, left, right, bottom gibi pozisyonlandırma özelliklerini kullanmanıza imkan verir. Tüm bunları kullanırken HTML öğeleriniz üst üste gelecek şekilde çakışma yapabilirsiniz. Eğer bu üst üste bindirme şeklinde bir tasarımı bilinçli olarak yapıyorsanız, hangisinin üste geleceği sorusunu z-index ile çözebilirsiniz. z-index konumlandırılan elemanları önde olma sırasını belirler. Değeri büyük olan en üstte görünür, diğerleri alta yerleşirler. Eğer z-index bildirimi yapılmaz ise en son HTML kodunda konumlandırılan öğe üstte gösterilir. z-index negatif değerlerde alabilir. Eksi bir değer aynı zamanda öğeyi metnin arkasına itecektir.

Örnek;


<!DOCTYPE html>
<html>
<head>
<style>
    .kutu1 {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -2;
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .kutu2 {
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: -1;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
</head>
<body>
    
    <h1>CSS z-index Kullanımı</h1>
    <div class="kutu1"></div>
    <div class="kutu2"></div>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.kutu1 {

position: absolute;

left: 0px;

top: 0px;

z-index: -2;

width: 100px;

height: 100px;

background-color: green;

}

.kutu2 {

position: absolute;

left: 20px;

top: 20px;

z-index: -1;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

<h1>CSS z-index Kullanımı</h1>

</body>

</html>

Örnek ;

Görüntünün üzerine çeşitli konumlarda bir metin yerleştirelim.


<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
    }
    img { 
        width: 100%;
        height: auto;
        opacity: 0.3;
    }
    div{
        position: absolute;
        font-size: 24px;        
    }
    .topleft {       
        top: 8px;
        left: 16px;        
    }
    .top{
        top: 8px;
        left: 50%;
    }
    .topright{
        top:8px;
        right: 16px;
    }
    .right{
        right: 16px;
        top: 50%;
    }
    .bottomright{
        bottom: 8px;
        right: 16px;
    }
    .bottom{
        bottom: 8px;
        left: 50%;
    }
    .bottomleft{
        bottom: 8px;
        left:16px;
    }
    .left{
        top: 50%;
        left: 8px;
    }
    .center{
        left: 50%;
        top: 50%;
    }
    
</style>
</head>
<body>

<div class="container">
  <img src="wp.jpg" alt="CSS Resim Metin Konumlandırma" width="1000" height="300">
  <div class="topleft">Sol Üst</div>
  <div class="top">Üst</div>
  <div class="topright">Sağ Üst</div>
  <div class="right">Sağ</div>
  <div class="bottomright">Sağ Alt</div>
  <div class="bottom">Alt</div>
  <div class="bottomleft">Sol Alt</div>
  <div class="left">Sol</div>
  <div class="center">Orta</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

div{

position: absolute;

font-size: 24px;

}

.topleft {

top: 8px;

left: 16px;

}

.top{

top: 8px;

left: 50%;

}

.topright{

top:8px;

right: 16px;

}

.right{

right: 16px;

top: 50%;

}

.bottomright{

bottom: 8px;

right: 16px;

}

.bottom{

bottom: 8px;

left: 50%;

}

.bottomleft{

bottom: 8px;

left:16px;

}

.left{

top: 50%;

left: 8px;

}

.center{

left: 50%;

top: 50%;

}

</style>

</head>

<body>

</div>

</body>

</html>

CSS Konumlandırma – position Kullanımı

position Özelliği

position : static ;

position : relative ;

position : fixed ;

position : absolute ;

position : sticky ;

z-index Nedir?

İlgili

1 Yorum

Yorum Yap X

position Özelliği

position : static ;

position : relative ;

position : fixed ;

position : absolute ;

position : sticky ;

z-index Nedir?

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X