Css Position nedir? nasıl kullanılır?

Css position elementi eski yapılan tasarımlarda pek olmasa artık günümüzün web sitelerinde olmazsa olmaz özelliklerinden biridir yani eski web sitelerimizde sıralı divler (yanyana divler) kullanırken artık bağımsız divler kullanıyoruz.  İlk başlarda position kullanmaya çekinirdim tarayıcılar arasında sorunlar yaratır diye ama kullanmaya başladıktan sonra gördüm ki position kullanmak daha basit ve kullanımı kolay.

Benim makale anlayışım örnekler yapmak ve sizlere örnekler göstermektir o yüzden hemen örneklere geçiyorum.
Şimdiki örnekte 3 tane kutu oluşturalım ve bir kutumuzu diğer kutulardan bağımsız yapalım, oluşturduğum kutuların görünümü ve kodları.


Css kodları ;

Html Kodları ;

Görmüş olduğunuz bu kutular float:left; komutu ile yan yana sıralanmış kutulardır. şimdi üçüncü kutuya  position:absolute özelliğini verelim ve neler olacak görelim.

position:absolute;

Aaa ne biçim birşey oldun sen öyle sadece position absolute verdik ve kutumuz uçtu gitti. Bunun anlamı açıklayacak olursak ;

Eğer kutuUc class’ımıza sadece position:absolute komutunu verirsek top ve left komutları otomatik olarak 0 değeri alır ve bir üstteki div’i de position:relative; olarak değerlendirir bu yüzden bulunduğu div’in sol üst başlangıç noktasına gider. Ama biz kutuUc divimizi istediğimiz yere koymak istiyoruz o yüzden left: ve top: komutlarına değerler vereceğiz

position:absolute; top:50px; left:300px;

kutuUc’ün class’ına bu position:absolute; top:50px; left:300px; değerini verdik burada top değeri sayfanın en tepesinden başlar , left değeri ise sayfanın en solundan başlar

Css kodları ;

Resimde de gördüğünüz gibi kutumuz bizim belirlediğimiz değerlere göre yer değiştirdi.

Kısa yollar:

Eğer div’i direk sayfanın soluna yerleştirmek istiyorsan left:0; komutunu üst tarafa yapıştırmak istiyorsak top:0; sağ tarafa yerleştirmek istiyorsak right:0; aşağıya yapıştırmak istiyorsak bottom:0; komutunu uygulamalıyız.

Position: relative;

Bence en önemli kısım burasıdır yani Position:relative. Relative komutu ilişkilendirme komutudur yani

kutuUc’ü kutu div ile ilişkilendiriyoruz ve kutuUc div’inin başlangıç noktaları kutu div’i ile başlıyor.

Hemen bir örnekte bu komut için verelim kutuUc div’inin bir üstündeki yani onu içine alan div’e position:relative; değerini vereceğiz sonra ise biz gene
kutuUc div’i ile uğraşarak yerleştirmemizi yapacağız.

Css kodları ;

Resimden de anlaşılacağı gibi kutu div’inin sol tarafından 40px üst tarafından 30px verdik ve kutuUc divini kutu div’i ile ilişkilendirerek istediğimiz yere getirdik.

Position:fixed;

Position fixed verdiğimiz div çakılı bir şekilde orada kalıyor hiç bir şekilde oynama yapmıyor.Ama bu özelliği ie6  desteklemiyor.

Position komutlırından benim kullandığım özellikler bunlar geri kalan static inherit gibi değerleri benim işime yaramıyor yakında position ile yapılmış kod örneklerini bu sayfadan paylaşacağım.

Kutu renklendirmesi için Umut Candan‘a teşekkürler :  )

“Css Position nedir? nasıl kullanılır?” üzerine 62 yorum

  1. peki hocam ben css ye yeni başladım birde bu kutuların ve resimlerin kenarlarına ovallik veriliyor o nasıl yapılıyor?
    yani her bir kenara 3px gibi bir değerle ovallik veriliyor bu örneklerdeki kutularada yapabiliyormuyuz ?

  2. peki aycan arkadaşım bu verdiğin linkteki “ama yeni nesil tarayıcılarda verir bunun için bir js plunig var ” demişsin yani bu js yi kullansam bile ie6 da görünmüyor oylemi ? benim gezdiğim çogu css sitede ie6 dada digerlerindede bu oval köşeler kullanılıyor ama tekniğini bilmiyorum..

  3. aycan linki incledim çok teşekkür ederin bu linkteki bilgiler ie senin anlatımını birleştirip güzel örneklemeler yapacagıma eminim
    çok tşk ederim diğer konulardada yarıma ihtiaycım olursa siteni sık kullanılanlara ekledim bol bol ziyaret ve eziyet edicem sana 🙂

  4. Merhaba

    Ellerine sağlık. Çok yararlı oldu. Peki bu kutuların içerisine yazı nasıl yazabiliriz?

  5. teşekkürler güzel bir anlatım olmuş özellikle position relative muhabbeti çok iyi… ama biraz örnek yapmam lazım yerleşmesi için 😀

  6. çok yararlı bir makale olmuş. aklımdaki soru işaretlerini büyük ölçüde giderdim. teşekkür ederim.

  7. Benim bir sorum olacak. Bir site üzerinde çalışıyorum ve sistemden gelen otomatik bir alanın kullanıldığı 2 yer var. Birinde position:absolute kullanmam gerekiyor. Birinde kullandığımda ikisini birden etkiliyor. Diğer kullandığım alanda position:absolute olmasın istiyorum. Nasıl yapabilirim. Teşekkürler…

  8. hocam dersiniz gerçekten çok güzell.bir kaç gündür yaşadığım bir soun vardıı ilaç gibi geldi

  9. Sayfada oluşan kaymaları makaleniz sayesinde çözdüm teşekkürler.

    NOT : mail adresimi site olarak yazmışım, önceki yorumumu silip bu yorumumuda editleyerek yayınlarsanız memnun olurum.

  10. teşekkürler hocam sayenizde sorunu çözdüm firefoxta sorun yoktu ama sırf internet explorer tarayıcısı yüzünden uğraş dur ne acayip bir tarayıcı

  11. ben bir div içine resim attım ve başka divi o resmin üstüne açmak istiyorum acil lazım lütfen yukarıdaki anlatımdakileri yapmaya calışıyorum ama resmin altına sabitliyo hep

  12. CSS codları için w3schools sitesinden hep faydalanırdım, ilk defa bu akdar açıklayıcı ve örnekleyici bir sayfa gördüm. Yeni kaynak burası artık 🙂 Teşekkürler.

  13. güzel bir anlatım olmuş teşekkür ederiz. ama relative position u istediğim gibi kullanamıyorum hala. relativ de iki kutununbir biriyle ilişkisini kuramıyorum. bir class oluşturup kutuları alt ata sıralamak istiyorum. yani bir class oluşturup, üç kutunun da aynı class a sahip olmasını bir div içerisinde kutuların birbirlerinden aynı uzaklıkta durmalarını istiyorum. nasıl yapacağım bilgi verirseniz sevinirim. yada böyle yapılmıyorsa nasıl yapabilirim. css de yeniyim teşekkür ederim

  14. Merhaba Hocam position absolute kodu kullandım sayfada örneğin bilgisayarın ekranını yakıslastırdında kodlar birbirine giriyor uzaklastırdındada yine kodlar istediğin yere eklediğinde tam yerinde durmuyor position absolute kodunu enkranı küçültme yaptığında örnek resim küçülür ama position absolute kodunda olmuyor ne yapmamız gerekir şimdiden Teşekkür ederim.

  15. Paylaşımın için teşekkürler. Yeni hazırladığım marmaris-emlak.com sitemi html5 kodlarıyla düzenlerken yararlandım.

  16. Hocam teşekkür ederiz. Sayfa linkini kayıt ettim. Tekrar yararlanmak için. marmaris-emlak.com sitemi yenileme çalışmasında oldukça işime yaradı.Başarılar dilerim.

  17. Aycan Bey çok güzel bir paylaşım olmuş.Çok güzel anlatmışsınız position kavramını.
    Benim şöyle bir sorum olacak: Örneğin .kutuUc e position:absolute; left:300px; top:50px; özelliği verilmiş. Bir dıştaki .kutu ya ise position:relative özelliğini vermişsiniz.Bu şekliyle .kutuUc .kutu yu referans almış ve sanki üst ve sol kenar dışı boşluğu(margin-top margin-left) görevi görmüş. .kutuUc e verilen margin:10px; in neden verildiğini anlatabilir misiniz?Şimdiden teşekkürler,emeğinize sağlık

  18. Çok teşekkürler.O kadar aradım.Tablo içinde metin piksel olarak hizalama ama bulamadım.Bu yazınız ile Position: relative; öğrendim ve sorunumu çözdüm.Harikasınız..

  19. gereksi uzunlukta bir yazı bu parametre için insanlar araştırma yaparken bi ton şey okuyor artık uzun yazı bıktırıyor ne olduğunu açıkla bi de örnek ver bukadar destan yazmanın ne anlamı var anlamıyorum…

  20. Absolute kullanımda değerleri verdiğimizde o margin-left yada right özelliği ile bir yere ayarladığımızda bunun Responsive tasarımda da yerleri değişiyormu yani bir bakıma fixedlemiş mi oluyoruz bunu çözemedim. Farzedinki 3 kutumuz var 1 tanesine absolute ile değer verdik ve sonra bu kutuyuda marginlerle istediğimiz yere getirdik bunun responsive açısından kaale alınıyormu acaba yani yine aynı şekilde responsive olarak değerlerim geçerli olacakmı bu konudada bilgi verebilirmisiniz. Örnek veremek gerekirse http://www.servisi.in adında bir siteme slider resmi ekledim ve bu resmi absolute ile slider alanıma koydum fakat tema responsive olduğu halde resim mobilden girildiğinde yine büyük şekilde açılıyor. Responsive için farklı bir değerde tekrar absolute değerlerimi ayarlamalıyız harici bir css dosyasında ?
    Teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir