HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css position nedir
css position
css position examples
css position element
css position kodu
css position kurs
css position list
css position options
css position örnekleri
css position özelliği
css position tag
css position static nedir
css div position static
css position fixed element
css position absolute nedir
css position absolute and fixed
css position absolute div
css position absolute example
css position absolute element
css position absolute ne demek
css position relative nedir
css position relative div
css position relative examples
css position relative element
css position fixed example
css position fixed menu
css position sticky nedir
css z-index nedir
css overlapping elements problem
css element overlapping

CSS Positon(Durum)

CSS Positon(Durum)

Web site elemanlarının pozisyonlarını belirlemek için kullanırız. Bu Css özelliğini anlatarak değil de göstererek anca anlaşılır olur. Bu özellik ile bir nesnenin sabit kalıp kalmaması hareketli olup olmaması gibi pozisyon özelliklerini belirleriz.

  • static
  • relative
  • fixed
  • absolute
  • sticky

Sıra ile bu özellikleri inceleyelim..

Web site elemanlarının pozisyonlarını belirlemek için kullanırız. Bu Css özelliğini anlatarak değil de göstererek anca anlaşılır olur. Bu özellik ile bir nesnenin sabit kalıp kalmaması hareketli olup olmaması gibi pozisyon özelliklerini belirleriz.

  • static
  • relative
  • fixed
  • absolute
  • sticky

Sıra ile bu özellikleri inceleyelim..

1-Position Static(Durum Sabit)

Web site elemanlarınız varsayılan şekilde belirli bir pozisyonda web sayfanız içerisine yerleşirler ve siz o elemanın üstüne bir başka eleman ekleyemezsiniz. Zaten öyle olması gerekmiyor mu diye düşünebilirsiniz. Evet zaten öyle olması gerekiyor fakat bazen ihtiyacınız olacak ki eleman üstüne eleman koyacaksınız. Biz şimdilik sabit özelliği inceleyelim. En güzel kutu örneği ile açıklanır bu iş ;)

Kullanımı:

Css
div.kirmizi-kutu {
background-color: #ff2727;
height: 100px;
width: 100px;
}
div.mavi-kutu {
background: lightskyblue;
height: 100px;
width: 100px;
position: static;
}
Html
<div class="kirmizi-kutu"></div>
<div class="mavi-kutu"></div>

2-Position Absolute(Durum Sınırsız-Rahat)

İki elemanın normal şartlarda üst üste gelemiyeceğini bunun mantıksız olduğunu söylemiştik fakat bir sonraki örneğimizde evet gerekliymiş diyeceksiniz. Bu örnekte pozisyonunu relative yaptığımız yani üstüne eleman gelirebilirliğini serbest bıraktığımız(bir sonraki örnekte yine anlatacağım ayrıca) ve ayrıcada rahat hareket ettirebileceğimiz bir hale getirdikten sonra bu elemanı ki bu elemanda mavi kutu oluyor. Üzerine de kırmızı kutuyu getirerek bir yapı oluşturmuş oluyoruz

Kullanımı:

Css
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid lightskyblue;
padding:3px;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #ff2727;
padding:3px;
}
Html
<div class="relative">Bu elementin position'u relative
<div class="absolute">Bu elementin position'u absolute;</div>
</div>

3-Position Relative(Pozisyon Bağıllığı)

İlk örneğimizdeki mavi ve kırmızı kutuyu hatırlayın. Hatta tekrardan o örneğe bir bakın. O örnekteki üstte kırmızı altta mavi kutu vardı. Bu özelliğimiz ile mavi kutuyu sabit özellikte bırakırken kırmızı kutu mavi kutunun sağına alacağız.Bunu yapmak için ilk önce kutuyu yukarıdan aşağı doğru 100 px indirmeliyiz. Çünkü mavi kutu aşağıda kalıyor ve kırmızı kutu mavi kutuyu geçmemeli tam hizasına gelmeli bu yüzdende hayal gücünüzü kullanırsanız kırmızı kutunun kendi yükseklik değeri kadar aşağı indiğinde tam olarak mavi kutunun hizasına geleceğini göreceksiniz.Boyutları da tam oturacağı için tam üstüne gelecek ve mavi kutuyu altında bırakacak ama biz mavi kutu da görünsün istiyoruz bu neden ile de kırmızı kutuyu soldan sağa doğru iterek mavi kutunun üzerinde alıyor ve tam bitişiğine getirmiş oluyoruz. Ve bu şekilde istediğimiz olmuş oluyor..

Kullanımı:

Css
div.kirmizi-kutu {
background-color: #ff2727;
position: relative;
width: 100px;
height: 100px;
top: 100px;/*Üstten 100px aşağı it*/
left: 100px;/*soldan 100px sağa it */
}
div.mavi-kutu {
background: lightskyblue;
height: 100px;
width: 100px;
position: static;
}
Html
<div class="kirmizi-kutu"></div>
<div class="mavi-kutu"></div>

4-Position Fixed(Pozisyon Belirlenmiş-sabitlenmiş)

Web sayfanız kaysa bile ilgili eleman sürekli sayfanın bir yerine sabitlenmiş bir şekilde kalır.Bu şekilde sürekli kullanıcının gözünün önünde olur.Sayfanın istediğiniz yerine yön parametreleri ile yerleştirme yapabilirsiniz.

Kullanımı:

Css
div.fixed {
position: fixed;
top: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Html
<h2>Google</h2>
<p>
Google (NASDAQ: GOOG), İnternet araması, çevrim içi bilgi dağıtımı, reklam teknolojileri ve arama motorları için yatırımlar yapan çok uluslu Amerikan anonim şirketidir.
İnternet tabanlı hizmet ve ürünler geliştirir, ek olarak bunlara ev
sahipliği yapar.[5] Kârının büyük kısmını AdWords programı
aracılığıyla reklamlardan elde etmektedir.[1][6] Şirket,
Larry Page ve Sergey Brin tarafından, Stanford Üniversitesi'nde
doktora öğrencisi oldukları sırada kurulmuştur. İkili, sık sık
"Google Guys" olarak anılmaktadır.[7][8][9] Google, ilk olarak,
4 Eylül 1998 tarihinde özel bir şirket olarak kuruldu ve 19 Ağustos
2004 tarihinde halka arz edildi. Halka arzın gerçekleştiği dönemde,
Larry Page, Sergey Brin ve Eric Schmidt, takip eden yirmi yıl boyunca,
yani 2024 yılına kadar Google'da birlikte çalışmak üzere anlaştılar.[10]
Kuruluşundan bu yana misyonu "dünyadaki bilgiyi organize etmek ve bunu evrensel olarak erişilebilir
ve kullanılabilir hale getirmektir.[11] Gayri resmi sloganı ise, Google mühendisi Amit Patel tarafından
bulunan ve Paul Buchheit tarafından desteklenen[12] "Don't be evil" (Kötü olma) dır. 2006 yılında, halen şirket
merkezi konumunda olan Mountain View, Kaliforniya'ya taşınmıştır.[13][14]
</p>
<p>
Google'ın dünya çapında veri merkezlerinde bir milyondan fazla sunucuda çalıştığı,[15] bir milyardan
fazla arama isteğini işlediği[16] ve kullanıcıları tarafından oluşturulan
verinin gün başına yirmi dört petabayt olduğu tahmin edilmektedir.[17][18][19][20] Kuruluşundan bugüne
dek gerçekleşen büyüme hızı, şirketin temel web arama motorunun ötesinde ürünler, satın almalar ve ortaklıklar
zincirinin meydana gelmesini sağladı. Şirket, Orkut, Google Buzz ve Google+ gibi sosyal ağ araçları ile elektronik
posta hizmeti Gmail servisi gibi çevirmiçi verimlilik yazılımları sunmakta, ek olarak, web tarayıcısı Google Chrome,
fotoğraf görüntüleme ve düzenleme yazılımı Picasa ve anlık mesajlaşma Google Talk gibi uygulamalarla masaüstüne kadar
uzanmaktadır. Bunlar dışında, Android mobil işletim sistemi gelişimine öncülük yapmıştır. Cr-48 ana işletim sistemi olarak da
bilinen yeni Google Chrome OS, 15 Haziran 2011 tarihinden beri, Samsung Series 5[21] ve Acer AC700[22] gibi ticari Chromebook'larda[23] kullanılmaktadır.
</p>
<p>
Alexa, internette en çok ziyaret edilen web sitesi olarak ABD odaklı "google.com"'u listelemektedir, YouTube, Blogger, Orkut gibi Google'a ait
diğer siteler ve çok sayıda uluslararası Google sitesi (google.co.in, google.co.uk vb.) ise en çok ziyaret edilen siteler arasında ilk yüz içinde yer almaktadır.[24]
Ek olarak şirket, BrandZ marka değeri veritabanı listesinde ikinci sırada yer almaktadır.[25] Buna karşın Google, gizlilik, telif hakkı ve sansür gibi konularda eleştiriler almaktadır.
</p>
<div class="fixed">
Bu yazu kutusu buraya sabitlenmiştir.
</div>
<p><strong>Kaynakça:</strong><a href="https://tr.wikipedia.org/wiki/Google" target="_blank">https://tr.wikipedia.org/wiki/Google</a></p>a

5-Position Sticky(Pozisyon Yapışkan)

Web sitenizdeki elemanları sayfanızın herhangi bir yerine yapıştırmasını sağlarız. İlgili elemanın varsayılan olarak sizin ayarladığınız konumdan kopmadan sürekli sizi takip eder. Fixed özelliğine çok benzese de farkı sayfa içerisindeki varsayılan konumdan harekete başlamasıdır. Tabiki en iyi örnek ile anlarsınız.

Kullanımı:

Css
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #4CAF50;
font-weight:bold;
color:#fff;
}
Html
<div class="sticky">Google Hakkında...</div>
<div style="padding-bottom:2000px">
<h2>Google</h2>
<p>
Google (NASDAQ: GOOG), İnternet araması, çevrim içi bilgi
dağıtımı, reklam teknolojileri ve arama motorları için yatırımlar
yapan çok uluslu Amerikan anonim şirketidir. İnternet tabanlı hizmet
ve ürünler geliştirir, ek olarak bunlara ev sahipliği yapar.[5]
Kârının büyük kısmını AdWords programı aracılığıyla reklamlardan elde
etmektedir.[1][6] Şirket, Larry Page ve Sergey Brin tarafından,
Stanford Üniversitesi'nde doktora öğrencisi oldukları sırada kurulmuştur.
İkili, sık sık "Google Guys" olarak anılmaktadır.[7][8][9] Google, ilk
olarak, 4 Eylül 1998 tarihinde özel bir şirket olarak kuruldu ve 19
Ağustos 2004 tarihinde halka arz edildi. Halka arzın gerçekleştiği
dönemde, Larry Page, Sergey Brin ve Eric Schmidt, takip eden yirmi yıl
boyunca, yani 2024 yılına kadar Google'da birlikte çalışmak üzere
anlaştılar.[10] Kuruluşundan bu yana misyonu "dünyadaki bilgiyi
organize etmek ve bunu evrensel olarak erişilebilir ve kullanılabilir
hale getirmektir.[11] Gayri resmi sloganı ise, Google mühendisi Amit
Patel tarafından bulunan ve Paul Buchheit tarafından desteklenen[12]
"Don't be evil" (Kötü olma) dır. 2006 yılında, halen şirket merkezi
konumunda olan Mountain View, Kaliforniya'ya taşınmıştır.[13][14]
</p>
<p>
Google'ın dünya çapında veri merkezlerinde bir milyondan fazla sunucuda
çalıştığı,[15] bir milyardan fazla arama isteğini işlediği[16] ve
kullanıcıları tarafından oluşturulan verinin gün başına yirmi
dört petabayt olduğu tahmin edilmektedir.[17][18][19][20]
Kuruluşundan bugüne dek gerçekleşen büyüme hızı, şirketin temel
web arama motorunun ötesinde ürünler, satın almalar ve ortaklıklar
zincirinin meydana gelmesini sağladı. Şirket, Orkut, Google Buzz ve
Google+ gibi sosyal ağ araçları ile elektronik posta hizmeti Gmail
servisi gibi çevirmiçi verimlilik yazılımları sunmakta, ek olarak,
web tarayıcısı Google Chrome, fotoğraf görüntüleme ve düzenleme
yazılımı Picasa ve anlık mesajlaşma Google Talk gibi uygulamalarla
masaüstüne kadar uzanmaktadır. Bunlar dışında, Android mobil işletim
sistemi gelişimine öncülük yapmıştır. Cr-48 ana işletim sistemi olarak
da bilinen yeni Google Chrome OS, 15 Haziran 2011 tarihinden beri,
Samsung Series 5[21] ve Acer AC700[22] gibi ticari Chromebook'larda[23]
kullanılmaktadır.
</p>
<p>
Alexa, internette en çok ziyaret edilen web sitesi olarak ABD odaklı
"google.com"'u listelemektedir, YouTube, Blogger, Orkut gibi Google'a
ait diğer siteler ve çok sayıda uluslararası Google sitesi
(google.co.in, google.co.uk vb.) ise en çok ziyaret edilen siteler
arasında ilk yüz içinde yer almaktadır.[24] Ek olarak şirket, BrandZ
marka değeri veritabanı listesinde ikinci sırada yer almaktadır.[25]
Buna karşın Google, gizlilik, telif hakkı ve sansür gibi konularda
eleştiriler almaktadır.</p>
</p>
<p><strong>Kaynakça:</strong><a href="https://tr.wikipedia.org/wiki/Google" target="_blank">https://tr.wikipedia.org/wiki/Google</a></p>

6-Overlapping Elements(Örtüşen Elementler/Z Index)

Web sitesi elemanlarınızın üst üste olabileceğini söylemiştik.Hangisinin üstte hangisinin altta olacağını yada eğer üçünçü veya dördüncü elemanınız da var ise üst üste geçmiş bu şekilde sıra ile hangisi hangisinin üstüne olacağını Z-Index ile ayarlarız.Aşağıdaki örnekte bir resim ve kabladığı alan üzerine ise geçmiş bir paragraf var.Aslında Çalışma ekranı da var oda onların en altında yer alıyor. Bu üç elemanı üst üste getirmek istediğimizde bu özelliği kullanıyoruz böylece ortaya güzel bir görüntü çıkmış oluyor.

Kullanımı:

Css
div.html-icon {
position: relative;
left: 0px;
top: 0px;
z-index: 1;
background:#4CAF50;
border-radius:5px;
}
p{
position:relative;
left:75px;
top:-65px;
z-index:2;
color:white;
}
Html
<div class="html-icon"><img src="../../../../img/site-icon.png" alt="html icon"></div>
<p>Bu bir paragraftır ve resmin önünde kalmalıdır. Bunun z-index değeri 0'dır.
Resmin ise -1'dir. 0 değeri -1 değerinden daha büyük olduğu için yazı daha ön plandadır
</p>


Paylaş:

Enes KILIÇ
Webmaster