CSS Positon Hakkında Bilmeniz Gereken Her Şey

Css konumu, bir öğeyi görünüm alanına konumlandırmak için kullanılan bir özelliktir. CSS postion uygulamak için position özelliğini kullanmanız gerekir.

Konumu manipüle etmek için 4 özellik.

  • top
  • bottom
  • left
  • right

5 çeşit css pozisyonu vardır.

Static

Statik konum, varsayılan davranıştır. Her zaman sayfanın normal akışına göre konumlandırılır.

Not: resmin başlığı olmalıdır static. Üzgünüm, benim hatam.

CSS Positon Hakkında Bilmeniz Gereken Her Şey

  
<h1>static</h1>
  <div class="outer__parent">outer parent
    <div class="parent">parent
     <div class="children">children</div>
    </div>
  </div>
   
* {
    color: #fff;
  }
  h1 {
    color: #000;
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .outer__parent {
    background: #00f;
    width: 50vw;
    height: 50vh;
    padding: 1rem;
    font-size: 1.5rem;
  }
  .parent {
    background: #f00;
    height: 30vh;
    margin-top: 1rem;
  }
  .children {
    background: #0ff;
    height: 10vh;
    color: #000;
    margin-top: 1rem;
  }
 
 
 
 

Relative

Göreceli konum, Statik konumla hemen hemen aynıdır. Ancak yukarıda belirtilen 4 özellik ile konumu normal konumundan değiştirebilirsiniz. Normal konumu boş bırakılacaktır.

CSS Positon Hakkında Bilmeniz Gereken Her Şey

 
.children {
    background: #0ff;
    height: 10vh;
    color: #000;
    margin-top: 1rem;
    position: relative;
    top: 20px;
    left: 300px;
  }
 
 
 

Absolute

relative konumdan farklı olarak, en yakın relative parent'a göre konumlandırılacaktır. Bulmazsa, document body'e yerleştirilecektir. Web sayfasının akışından kaldırılacaktır. Ayrıca diğer öğelerle birlikte kaydırılacaktır.

CSS Positon Hakkında Bilmeniz Gereken Her Şey

relative parent olmayan

  
.children {
    background: #0ff;
    height: 10vh;
    color: #000;
    margin-top: 1rem;
    position: absolute;
    top: 20px;
    left: 300px;
  }
   

CSS Positon Hakkında Bilmeniz Gereken Her Şey

relative parent ile

  
.parent {
    background: #f00;
    height: 30vh;
    margin-top: 1rem;
    position: relative;
  }
  .children {
    background: #0ff;
    height: 10vh;
    color: #000;
    margin-top: 1rem;
    position: absolute;
    top: 20px;
    left: 300px;
  }
   

Fixed

fixed, absolute bazı farklarla benzer . document body'e göre konumlandırılacaktır. Görünüm alanı içinde sabit kalacak ve asla kaydırılmayacaktır.

CSS Positon Hakkında Bilmeniz Gereken Her Şey

  
.children {
    background: #0ff;
    height: 10vh;
    color: #000;
    margin-top: 1rem;
    position: fixed;
    top: 20px;
    left: 15%;
  }
   

Sticky

Yapışkan bir öğe relative ve fixed arasında geçiş yapar. İlk başta relative kalacak . Aşağı veya yukarı kaydırıldığında bir offset(vereceğiniz pozisyon) ile karşılaşacaktır. Sonra düzeltmek için çevirilecektir. Üst öğe görünüm alanından geçirilirse, o da kaydırılır. Üst öğe belge gövdesiyse. O zaman hep sabit kalır.

CSS Positon Hakkında Bilmeniz Gereken Her Şey 

.children {
  background: #0ff;
  height: 10vh;
  color: #000;
  margin-top: 1rem;
  position: sticky;
  top: 20px;
}
   

CSS postion hakkında bilmeniz gereken tek şey bu. Herhangi bir sorunuz varsa, yorum bölümünde onlara sormaktan çekinmeyin. Öğretme şeklimi beğendiyseniz, lütfen Cules Coding'i ziyaret edin . Beni instagram Linkedin'den takip etmekten çekinmeyin. Verimlilik, motivasyon, ipuçları vb. hakkında içerik yayınlıyorum.

 

Kaynak

 

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...