Konum, Dönüşüm ve Sınırlar

Bu dersin sonunda bir elemanı akıştan çıkarıp istediğiniz yere koyabilecek, döndürüp büyütebilecek ve satır içi CSS’in neleri yapamadığını açıklayabileceksiniz.

position: Konumlandırma

Normalde elemanlar HTML’deki sıralarına göre dizilir. Buna normal akış denir. position bu davranışı değiştirir. Konumu top, right, bottom ve left özellikleriyle verirsiniz.

• static Varsayılan. top ve left gibi değerler etkisizdir.
• relative Normal yerinden kaydırılır, ama orijinal yeri boş kalır.
• absolute Akıştan çıkar ve konumlandırılmış en yakın dış elemana göre yerleşir.
• fixed Akıştan çıkar ve pencereye göre yerleşir, sayfa kaydırılsa da yerinde kalır.
• sticky Normal akışta durur, kaydırma sırasında belirlenen noktaya gelince yapışır.

relative

<div style="background-color: lightblue; padding: 8px;">Bir</div>
<div style="background-color: lightgreen; padding: 8px; position: relative; left: 40px; top: 10px;">İki (kaydırıldı)</div>
<div style="background-color: khaki; padding: 8px;">Üç (yerinden oynamadı)</div>

absolute

absolute bir eleman, position değeri static dışında olan en yakın dış elemana göre yerleşir. Bu yüzden en yaygın kalıp şudur: Dıştaki kutuya position: relative, içtekine position: absolute yazılır.

Köşedeki rozetler bu şekilde yapılır:

<div style="position: relative; width: 240px; padding: 24px; border: 1px solid gray; border-radius: 8px;">
  Bir ürün kartı
  <span style="position: absolute; top: -8px; right: -8px; background-color: crimson; color: white; padding: 2px 8px; border-radius: 999px;">Yeni</span>
</div>

sticky ve fixed

sticky eleman, kaydırılan kutunun içinde belirlediğiniz noktaya gelince yapışır. Aşağıdaki kutuyu kaydırın:

<div style="height: 140px; overflow: auto; border: 1px solid gray;">
  <div style="position: sticky; top: 0; background-color: gold; padding: 8px;">Yapışkan başlık</div>
  <p>Birinci paragraf.</p>
  <p>İkinci paragraf.</p>
  <p>Üçüncü paragraf.</p>
  <p>Dördüncü paragraf.</p>
  <p>Beşinci paragraf.</p>
</div>

fixed değeri ise pencereye göre çalışır. Sayfa kaydırılınca yerinde kalan üst menüler ve sağ alttaki yardım düğmeleri böyle yapılır. Önizleme kutusu çok küçük bir pencere olduğu için bunu kendi dosyanızda deneyin:

<div style="position: fixed; right: 16px; bottom: 16px; background-color: crimson; color: white; padding: 12px;">Yardım</div>

z-index: Hangisi üstte?

Elemanlar üst üste bindiğinde z-index değeri büyük olan üstte görünür. Yalnızca konumlandırılmış elemanlarda ve Flexbox ya da Grid öğelerinde işe yarar.

<div style="position: relative; height: 100px;">
  <div style="position: absolute; left: 0; top: 0; width: 100px; height: 80px; background-color: lightblue; z-index: 1;">z-index: 1</div>
  <div style="position: absolute; left: 50px; top: 20px; width: 100px; height: 80px; background-color: lightpink; z-index: 2;">z-index: 2</div>
</div>

float: Yazıyı resmin çevresinde akıtmak

Eskiden sayfa düzeni için kullanılan float, bugün asıl işini yapıyor: Yazının bir resmin çevresinde akmasını sağlıyor. Sayfa düzeni için Flexbox veya Grid kullanın.

<img src="baldiyetapanadam.png" alt="Örnek resim" style="float: left; width: 80px; margin-right: 12px;">
<p>Bu paragraf, solda duran resmin çevresinde akıyor. Satırlar resmin bittiği yere kadar yanında duruyor, sonra tekrar sol kenardan başlıyor. Pencereyi daraltırsanız bu davranışı daha iyi görürsünüz. Dergilerde ve gazetelerde sık görülen bir düzendir.</p>
<p style="clear: both;">Bu paragraf <code>clear: both</code> ile resmin altından başlıyor.</p>

transform: Döndürmek, büyütmek, kaydırmak

transform elemanı görsel olarak değiştirir ve çevresindeki elemanları etkilemez. Birden çok işlevi boşlukla ayırarak yazabilirsiniz.

• rotate(10deg) Döndürür.
• scale(1.5) Büyütür veya küçültür.
• translate(20px, 10px) Kaydırır.
• skew(10deg) Eğer.

<div style="display: flex; gap: 40px; padding: 24px;">
  <div style="background-color: lightblue; padding: 12px; transform: rotate(10deg);">rotate</div>
  <div style="background-color: lightgreen; padding: 12px; transform: scale(1.3);">scale</div>
  <div style="background-color: khaki; padding: 12px; transform: translate(10px, 10px);">translate</div>
  <div style="background-color: lightpink; padding: 12px; transform: skew(10deg);">skew</div>
</div>

transform-origin dönüşümün merkez noktasını değiştirir. Varsayılan değer elemanın ortasıdır.

Satır içi CSS’in yapamadıkları

Bu ünite boyunca style niteliği işimizi gördü, ama aşılamaz sınırları var. Şunları style niteliğiyle yazamazsınız:

• Durumlar. Fare üzerine gelince renk değiştirmek için :hover, klavyeyle seçilince göstermek için :focus gerekir. Bunlar seçicidir ve style niteliğinde seçici yoktur.
• Parçalar. ::before ve ::after ile içerik eklemek veya ::first-line ile ilk satırı seçmek.
• Ekran boyutuna uyum. @media kuralları.
• Animasyonlar. @keyframes tanımları. transition yazabilirsiniz ama onu tetikleyecek bir durum olmadığı için tek başına bir işe yaramaz.
• Yeniden kullanmak. Aynı görünümü on elemanda istiyorsanız on kez yazmanız gerekir.

Aşağıda aynı görünüm style etiketindeki bir sınıfla yazılmış. Sınıf değerini bir kez değiştirirsiniz, bütün düğmeler değişir. :hover de ancak böyle çalışır: Farenizi düğmelerin üzerine getirin.

<style>
  .dugme { background-color: teal; color: white; padding: 8px 16px; border: 0; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
  .dugme:hover { background-color: crimson; }
</style>

<button class="dugme">Kaydet</button>
<button class="dugme">Gönder</button>
<button class="dugme">İptal</button>

<div style="position: relative; padding: 24px;">
  Kart
  <span style="position: absolute; top: 0; right: 0;">Yeni</span>
</div>

<span style="display: inline-block; background-color: gold; transform: rotate(-5deg);">İndirim</span>

Bu derste öğrendikleriniz

• position elemanın akıştaki yerini değiştirir. absolute için dıştaki kutuya relative yazılır.
• z-index üst üste binen konumlandırılmış elemanların sırasını belirler.
• float yazıyı resmin çevresinde akıtmak içindir, transform çevreyi etkilemeden görünümü değiştirir.
• style niteliği :hover, @media ve @keyframes yazamaz, kod da yeniden kullanılamaz.