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.
<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.
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.
relative parent olmayan
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: absolute;
top: 20px;
left: 300px;
}
relative parent ile
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.
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.
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