4 beğenilme 0 beğenilmeme
52 gösterim
Merhaba ,

Css ile konumlandırma yapmak istiyorum position özelliği tam olarak nasıl kullanılır ?
14 Temmuz Css kategorisinde sedakılıç Junior Developer (810 puan) paylaştı | 52 gösterim

1 cevap

0 beğenilme 0 beğenilmeme
En İyi Cevap

CSS position özelliği HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar.

Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir.

Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır.

Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır.

Bunlar:

  • static - Hiçbir özellik belirtilmediyse
  • fixed - Sabit, tarayıcıya göre hareket etmeyen element
  • relative - Normal olması gereken pozisyona göre konum belirlemek
  • absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek

static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır.

Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.
 

fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek.

Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).

.sabit
   {
      position: fixed;
      top: 30px;
      right: 5px;
   }


Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.
 

relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar.

Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz.

Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.

  h2
   {
      position: relative;

      left: -20px;
   }


Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır.

Bu durumda diğer elementlerin alanına girebilecektir.
 

absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:

h2
   {
      position: absolute;
      left: 100px;
      top: 150px;
   }

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar.

Yani sayfamızdan soyutlanmışlardır.

Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.

14 Temmuz serhat.öcal Uzman Coder (13,350 puan) cevapladı
uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER

    96 soru

    81 cevap

    19 yorum

    122 üye

    ×

    Bizi Takip Edin!

    Bumerang - Yazarkafe

    comodo ssl




    96 soru
    81 cevap
    19 yorum
    122 üye