Bootstrap Position Sınıfları: position-absolute, fixed-top ve sticky-top

Position değerleri

Belgeler beş hızlı konumlandırma sınıfı listeler ve bunların duyarlı olmadığını özellikle belirtir; yani .position-md-absolute gibi bir sınıf yoktur. Kaynak kodda "position" girdisi responsive anahtarı taşımaz.

.position-sticky derlenmiş dosyada önce önekli -webkit-sticky değerini, ardından standart sticky değerini yazar. Bir ekran genişliğinde mutlak, diğerinde normal konum istiyorsanız Bootstrap sınıfları yetmez; kendi medya sorgunuzu yazmanız gerekir (bkz. CSS media query sözdizimi).

Kenar yardımcıları: top, bottom, start, end

Kenar sınıfları {özellik}-{konum} biçimindedir. Özellik top (dikey üst), bottom (dikey alt), start (soldan sağa yazımda sol) veya end (soldan sağa yazımda sağ) olabilir. Konum değerleri 0, 50 ve 100'dür; sırasıyla 0, 50% ve 100% anlamına gelir. Derlenmiş CSS'te örneğin .top-50 top: 50% !important;, .start-50 left: 50% !important;, .end-0 ise right: 0 !important; olarak tanımlıdır.

Değerler _variables.scss dosyasındaki $position-values haritasından gelir. Belgeler daha fazla konum değeri için bu haritaya girdi eklemenizi söyler; varsayılan dosyada .top-25 gibi bir sınıf yoktur.

// scss/_variables.scss (v5.0.2)
$position-values: (
  0: 0,
  50: 50%,
  100: 100%
) !default;

Geçiş rehberine göre bu kenar yardımcıları Bootstrap 5 ile eklendi ve RTL desteği nedeniyle yön adları mantıksal hale getirildi; Bootstrap 4 dönemindeki .left-* ve .right-* adları .start-* ve .end-* oldu. Kenar sınıflarının işe yaraması için öğenin konumlandırılmış olması gerekir: .top-0 tek başına position: static bir öğede hiçbir şey değiştirmez.

<div class="position-relative border" style="height: 150px;">
  <div class="position-absolute top-0 start-0 p-1 bg-light border">Sol üst</div>
  <div class="position-absolute top-0 end-0 p-1 bg-light border">Sağ üst</div>
  <div class="position-absolute bottom-0 start-0 p-1 bg-light border">Sol alt</div>
  <div class="position-absolute bottom-0 end-0 p-1 bg-light border">Sağ alt</div>
</div>

Bu örnekte dört kutunun konumu, en yakın konumlandırılmış ata olan .position-relative kapsayıcıya göre hesaplanır. Kapsayıcıdan .position-relative sınıfını kaldırırsanız kutular sayfadaki başka bir atalarına göre konumlanır ve beklenmedik yerlere kayar.

Ortalamak: translate-middle

.start-50 .top-50 öğenin sol üst köşesini kapsayıcının ortasına taşır, ama öğenin kendisi ortalanmış olmaz; sağa ve aşağıya doğru taşar. .translate-middle bu farkı kapatır: derlenmiş CSS'te transform: translate(-50%, -50%) !important; kuralını uygular ve öğeyi kendi genişliğinin ve yüksekliğinin yarısı kadar geri çeker. Kenar sınıflarıyla birlikte kullanıldığında öğe tam ortaya oturur.

Yalnızca tek eksende ortalamak için .translate-middle-x (translateX(-50%)) ve .translate-middle-y (translateY(-50%)) vardır. Geçiş rehberi bu iki sınıfı mutlak ya da sabit konumlu öğeleri yatay veya dikey ortalamak için eklenen yeni yardımcılar arasında sayar.

<div class="position-relative border" style="height: 150px;">
  <div class="position-absolute top-50 start-50 translate-middle p-2 bg-light border">Tam ortada</div>
  <div class="position-absolute top-0 start-50 translate-middle-x p-1 border">Üstte, yatay ortada</div>
  <div class="position-absolute top-50 end-0 translate-middle-y p-1 border">Sağda, dikey ortada</div>
</div>

translate-middle kenar değerleriyle birleştiğinde öğeyi bir köşenin ya da kenarın tam üstüne de oturtabilir: .top-0 .start-100 .translate-middle öğenin merkezini kapsayıcının sağ üst köşesine yerleştirir. Bildirim rozetleri bu kombinasyonu kullanır.

Gerçek kullanım: butona bildirim rozeti

Hem position hem badge belgelerinde yer alan örnek, bir butonun sağ üst köşesine okunmamış mesaj sayısı koymaktır. Buton .position-relative ile konum referansı olur, rozet .position-absolute .top-0 .start-100 .translate-middle ile köşeye oturur:

<button type="button" class="btn btn-primary position-relative">
  Mesajlar
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    12
    <span class="visually-hidden">okunmamış mesaj</span>
  </span>
</button>

Rozetin içindeki .visually-hidden metni ekranda görünmez ama ekran okuyuculara sayının ne anlama geldiğini söyler. Sayı göstermeden yalnızca bir nokta istiyorsanız belgeler .badge yerine .p-2 .bg-danger .border .border-light .rounded-circle gibi birkaç yardımcıyla genel bir gösterge kurmayı önerir. Rozet bileşeninin kendisi Bootstrap badge yazısında, erişilebilir gizleme ise Bootstrap erişilebilirlik yazısında anlatılıyor.

Position belgelerindeki bir başka örnek, bir ilerleme çubuğunun üzerine adım numaralarını yerleştirir: ince bir .progress çubuğu .position-relative kapsayıcının içinde durur, üç küçük yuvarlak buton ise .top-0 ile birlikte .start-0, .start-50 ve .start-100 ve .translate-middle alarak çubuğun başına, ortasına ve sonuna oturur. Bu tür kalıpların ortak noktası, mevcut bileşenleri birkaç konum sınıfıyla birleştirerek yeni bir görünüm elde etmektir. İlerleme çubuğu için Bootstrap progress bar yazısına bakabilirsiniz.

Uygulama: görselin köşesine etiket ve kapatma butonu

Bir ürün kartında görselin sol üst köşesine "Yeni" etiketi, sağ üst köşesine de bir kapatma butonu koymak isteyelim. İkisi de görselle aynı kapsayıcıda durmalı ve kapsayıcı büyüyüp küçüldükçe köşelere bağlı kalmalı:

<div class="position-relative">
  <img src="urun.jpg" class="img-fluid" alt="Ürün görseli">
  <span class="position-absolute top-0 start-0 m-2 badge bg-success">Yeni</span>
  <button type="button" class="btn-close position-absolute top-0 end-0 m-2" aria-label="Kapat"></button>
</div>

Kapsayıcıdaki .position-relative iki öğenin konum referansıdır. Etiket .top-0 .start-0 ile sol üst köşeye, buton .top-0 .end-0 ile sağ üst köşeye yapışır. Köşeye tam yapışmasınlar diye ikisine de .m-2 verildi; mutlak konumlu öğelerde margin, kenar uzaklığının üstüne eklenen bir iç boşluk gibi çalışır. Burada .translate-middle kullanılmadı, çünkü öğelerin köşenin üstüne değil içine oturması isteniyor. Kapatma butonunun aria-label özniteliği, görsel bir metni olmayan butonun ekran okuyucular için adını verir; .btn-close sınıfı Bootstrap buton sınıfları yazısında, .img-fluid ise Bootstrap img-fluid yazısında anlatılıyor.

Hazır yardımcılar: fixed-top, fixed-bottom, sticky-top

Helpers bölümündeki position yardımcıları, sık kullanılan kombinasyonları tek sınıfta toplar. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıflar şöyle tanımlıdır:

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

Bu kuralların position yardımcılarından iki farkı vardır: !important taşımazlar ve kendi z-index değerleriyle gelirler. .fixed-top öğeyi görüntü alanının üstüne kenardan kenara sabitler, .fixed-bottom altına. Belgeler her iki sınıf için de sabit konumun projenizdeki sonuçlarını anlamanız ve ek CSS yazmanız gerekebileceği uyarısını yapar.

Sabit menü içeriği örtmesin

Sabit konumlu bir öğe normal akıştan çıkar; altındaki içerik onun varlığından haberdar olmaz ve sayfanın en üstünden başlar. Navbar belgeleri bu yüzden sabit navbar'larda örneğin <body> üzerinde bir padding-top gerekebileceğini söyler. Resmî örnekler bunu farklı biçimlerde çözer: Bootstrap 5.0 örnek şablonu: Navbar fixed şablonu body öğesine padding-top: 4.5rem verir, Bootstrap 5.0 örnek şablonu: Sticky footer navbar şablonu ise main > .container için padding: 60px 15px 0 kullanır.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Site adı</a>
  </div>
</nav>
<main class="container" style="padding-top: 4.5rem;">
  <h1>Sayfa başlığı artık menünün altında kalmaz</h1>
</main>

Buradaki 4.5rem değeri resmî şablondan alınmıştır; kendi navbar'ınızın yüksekliğine göre ayarlayın. Navbar yerleşim seçeneklerinin tamamı Bootstrap navbar yazısında.

Kaydırınca yapışan öğe: sticky-top

.sticky-top öğeyi görüntü alanının üstüne kenardan kenara yerleştirir, ama belgelere göre bunu ancak siz öğenin yanından kaydırıp geçtikten sonra yapar; öncesinde öğe normal akıştaki yerinde durur. Bu yüzden sabit menülerdeki gibi bir boşluk ayarı gerektirmez. Bootstrap 5.0 belgeleri bu sınıfın CSS position: sticky değerini kullandığını ve bu değerin her tarayıcıda tam desteklenmediğini belirtir. Resmî Bootstrap 5.0 örnek şablonu: Dashboard şablonunda üst başlık çubuğu .sticky-top kullanır.

Duyarlı sürümler de vardır: .sticky-sm-top, .sticky-md-top, .sticky-lg-top, .sticky-xl-top. Bunlar öğeyi yalnızca o kademe ve üstündeki ekranlarda yapıştırır; derlenmiş dosyada her biri kendi min-width sorgusunun içindedir. Belgeler sm ile xl arasını listeler; kaynak kod tüm kesme noktaları üzerinde döndüğü için 5.0.2 CSS dosyasında .sticky-xxl-top da bulunur.

Kenar boşluklu bir yapışkan kenar çubuğu istiyorsanız .position-sticky ile kendi top değerinizi birleştirebilirsiniz. Resmî Bootstrap 5.0 örnek şablonu: Blog şablonu yan sütundaki içeriği bu şekilde yapıştırır:

<div class="row">
  <div class="col-md-8">Uzun makale içeriği</div>
  <div class="col-md-4">
    <div class="position-sticky" style="top: 2rem;">
      <div class="p-4 mb-3 bg-light">Hakkında kutusu</div>
    </div>
  </div>
</div>

Z-index ölçeği

Z-index belgeleri, birçok Bootstrap bileşeninin üst üste binme sırasını belirlemek için z-index kullandığını ve navigasyonu, tooltip ve popover'ları, modal'ları doğru katmanlamak için tasarlanmış varsayılan bir ölçek olduğunu anlatır. Değerler bilerek yüksek ve belirgin bir sayıdan başlatılmıştır, böylece çakışma ihtimali azalır. v5.0.2 kaynağındaki ölçek şöyledir:

Tabloyu okurken sıralamaya dikkat edin: yapışkan öğeler sabit öğelerin, sabit öğeler modal arka planının altında kalır. Bu yüzden açılan bir modal, sabit navbar'ı da örter. Belgeler bu değerleri tek tek özelleştirmeyi önermez; birini değiştirirseniz büyük ihtimalle hepsini değiştirmeniz gerekeceğini söyler. Ayrıca input group gibi bileşenlerde üst üste binen kenarlıkları yönetmek için varsayılan, hover ve active durumlarında 1, 2 ve 3 gibi tek basamaklı değerler kullanılır; odaklanan öğe kenarlığını komşularının üstünde göstermek için öne alınır.

Sık yapılan hatalar

• Ata öğeyi konumlandırmamak: .position-absolute öğe en yakın konumlandırılmış ataya göre yerleşir. Geçiş rehberine göre v5'te grid sütunları artık position: relative taşımıyor; Bootstrap 4'te sütun içinde çalışan mutlak konumlu bir öğe için sütuna .position-relative eklemeniz gerekebilir.
• Duyarlı position sınıfı aramak: .position-md-absolute yoktur. Yalnızca yapışkanlık için .sticky-{kademe}-top duyarlı sürümleri vardır.
• Olmayan kenar değerleri: .top-25, .start-10 gibi sınıflar yoktur; $position-values haritasına ekleyip derlemeniz gerekir.
• v4 adlarını kullanmak: .left-0 ve .right-0 v5'te .start-0 ve .end-0 oldu (Bootstrap 4'ten 5'e geçiş).
• Sabit menünün içeriği örtmesi: .fixed-top kullandığınızda içeriğe üstten boşluk verin ya da .sticky-top kullanmayı düşünün.
• Gelişigüzel yüksek z-index: z-index: 99999 gibi değerler modal ve tooltip'lerin üstüne çıkar ve bileşenleri kullanılamaz hale getirebilir. Ölçekteki aralıklara göre değer seçin. Ayrıca iki modal'ı aynı anda açma gibi katman sorunları için Bootstrap sık hatalar yazısına bakın.

Sık Sorulan Sorular

Bir öğeyi sayfanın tam ortasına nasıl yerleştiririm?

Ekrana göre ortalamak için .position-fixed .top-50 .start-50 .translate-middle kullanabilirsiniz; bir kapsayıcıya göre ortalamak için kapsayıcıya .position-relative, öğeye .position-absolute .top-50 .start-50 .translate-middle verin. Akış içinde ortalama için çoğu zaman flex yardımcıları daha basittir.

fixed-top ile sticky-top arasındaki fark nedir?

.fixed-top öğeyi her zaman ekranın üstünde tutar ve akıştan çıkarır; içeriğe boşluk vermeniz gerekir. .sticky-top öğeyi önce akıştaki yerinde tutar, kaydırıp geçince üstte yapıştırır. z-index değerleri de farklıdır: 1030 ve 1020.

Toast bildirimlerini ekranın köşesine nasıl koyarım?

Geçiş rehberine göre toast'lar artık position yardımcılarıyla bir .toast-container içinde konumlandırılabilir; örneğin .position-fixed .bottom-0 .end-0. Ayrıntılar Bootstrap toast yazısında.

Position sınıfları RTL sayfalarda nasıl davranır?

Belgeler start sınıfını soldan sağa yazımda sol, end sınıfını sağ olarak tanımlar. RTL için Bootstrap'in ayrı derlenmiş dosyaları vardır; kurulum Bootstrap kurulum yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap navbar · Badge ve spinner · Toast bildirimleri · Flex yardımcıları · CSS öğrenme rehberi