CSS Sabit Konumlandırma API'si, öğeleri sabitler olarak bilinen diğer öğelere göre yerel olarak konumlandırmanıza olanak tanıdığından web geliştirmede büyük fark yaratır. Bu API, menüler ve alt menüler, araç ipuçları, seçimler, etiketler, kartlar, ayar iletişim kutuları ve daha birçok arayüz özelliği için karmaşık düzen gereksinimlerini basitleştirir. Tarayıcıda yerleşik olarak bulunan sabit konumlandırmayla, üçüncü taraf kitaplıklara bağlı kalmadan katmanlı kullanıcı arayüzleri oluşturabilecek ve böylece yaratıcı olasılıklarla dolu bir dünyanın kapılarını açabileceksiniz.
Çapa konumlandırma Chrome 125'te kullanılabilir.
Temel Kavramlar: Sabitlemeler ve konumlandırılmış öğeler
Bu API'nin temelinde sabit öğeler ve konumlandırılmış öğeler arasındaki ilişki yatar. Bağlayıcı, anchor-name
özelliği kullanılarak referans noktası olarak atanmış bir öğedir. Konumlandırılan öğe, position-anchor
özelliği kullanılarak veya konumlandırma mantığında açıkça anchor-name
kullanılarak bir bağlayıcıya göre yerleştirilmiş bir öğedir.
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-0.png?authuser=5&hl=tr)
Anchor'ları oluşturma
Anchor oluşturmak kolaydır. Anchor-name özelliğini seçilen öğeye uygulayın ve bu öğeye benzersiz bir tanımlayıcı atayın. CSS değişkenine benzer şekilde, bu benzersiz tanımlayıcının başına çift kısa çizgi eklenmelidir.
.anchor-button {
anchor-name: --anchor-el;
}
Bir bağlayıcı adı atandıktan sonra .anchor-button
, diğer öğelerin yerleşimini yönlendirmeye hazır bir bağlayıcı görevi görür. Bu bağlantıyı iki şekilde diğer öğelere bağlayabilirsiniz:
Örtülü çapalar
Bir bağlayıcıyı başka bir öğeye bağlamanın ilk yolu, aşağıdaki kod örneğinde olduğu gibi dolaylı bir bağlayıcı kullanmaktır. position-anchor
özelliği, anchor'ınıza bağlamak istediğiniz öğeye eklenir ve değer olarak bağlayıcının adını (bu örnekte --anchor-el
) içerir.
.positioned-notice {
position-anchor: --anchor-el;
}
Örtülü bağlayıcı ilişkisiyle, ilk bağımsız değişkende bağlantı adını açıkça belirtmeden anchor()
işlevini kullanarak öğeleri konumlandırabilirsiniz.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
Açık çapalar
Alternatif olarak, çapa adını doğrudan çapa işlevinde kullanabilirsiniz (örneğin, top: anchor(--anchor-el bottom
). Buna açık bağlayıcı denir ve birden çok öğeyi bağlamak istiyorsanız kullanışlı olabilir (bir örnek için okumaya devam edin).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
Öğeleri sabit öğelere göre konumlandırın
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-1.png?authuser=5&hl=tr)
Bağlayıcı konumlandırma, CSS mutlak konumlandırmasını temel alır. Konumlandırma değerlerini kullanmak için, konumlandırılmış öğenize position: absolute
eklemeniz gerekir. Ardından, konumlandırma değerlerini uygulamak için anchor()
işlevini kullanın. Örneğin, sabit bir öğeyi sabitleme öğesinin sol üst tarafına konumlandırmak için aşağıdaki konumlandırmayı kullanın:
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-2.png?authuser=5&hl=tr)
Böylelikle bir başkasına sabitlenmiş bir öğeniz olur. Örneğin:
Bu değerler için mantıksal konumlandırmayı kullanmak için eşdeğerleri aşağıda verilmiştir:
top
=inset-block-start
left
=inset-inline-start
bottom
=inset-block-end
right
=inset-inline-end
Konumlandırılan bir öğeyi anchor-center
ile ortala
Sabit konumlandırılmış öğenizi, sabit değerine göre ortalamayı kolaylaştırmak için justify-self
, align-self
, justify-items
ve align-items
özellikleriyle kullanılabilecek anchor-center
adlı yeni bir değer ekledik.
Bu örnekte, konumlandırılan öğeyi sabit öğesinin üzerine ortalamak için justify-self: anchor-center
kullanılarak önceki öğe değiştirilir.
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
justify-center
kullanılarak ortalanan çapa gösterimi.Birden çok bağlayıcı
Öğeler birden fazla bağlayıcıya bağlanabilir. Bu, birden fazla sabitle göreli olarak konumlandırılmış konum değerleri ayarlamanız gerekebileceği anlamına gelir. Bunu, anchor()
işlevini kullanıp ilk bağımsız değişkende hangi çapaya başvuruda bulunduğunuzu açık bir şekilde belirterek yapın. Aşağıdaki örnekte, konumlandırılan bir öğenin sol üst kısmı bir bağlayıcının sağ alt kısmına, konumlandırılan öğenin sağ alt kısmı ise ikinci bağlayıcının sol üstüne sabitlenmiştir:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
inset-area
ile konum
Mutlak konumlandırmanın varsayılan yön konumlandırmasına ek olarak, sabitleme API'sına iç alan adı verilen yeni bir düzen mekanizması dahil edilir.
Ek alan, sabitlenen öğelerin ilgili tutturmalara göre yerleştirilmesini kolaylaştırır ve sabitleme öğesi ortada olan 9 hücreli bir ızgara üzerinde çalışır.
9 hücreli ızgarada gösterilen çeşitli olası iç alan konumlandırma seçenekleri
Mutlak konumlandırma yerine iç alanı kullanmak için fiziksel veya mantıksal değerlerle inset-area
özelliğini kullanın. Örneğin:
- Üst orta:
inset-area: top
veyainset-area: block-start
- Sol orta:
inset-area: left
veyainset-area: inline-start
- Alt orta:
inset-area: bottom
veyainset-area: block-end
- Sağ orta:
inset-area: right
veyainset-area: inline-end
Bu konumları daha ayrıntılı şekilde keşfetmek için aşağıdaki araca göz atın:
Öğeleri anchor-size()
ile boyutlandırma
Sabit konumlandırma API'sinin bir parçası olan anchor-size()
işlevi, sabitlenen bir öğeyi bağlayıcının boyutuna (genişlik, yükseklik veya satır içi ve blok boyutları) göre boyutlandırmak veya konumlandırmak için kullanılabilir.
Aşağıdaki CSS,ipucunun maksimum yüksekliğini bağlayıcının yüksekliğinin iki katı olacak şekilde ayarlamak üzere calc()
işlevi içinde anchor-size(height)
kullanılarak yükseklik için bunun kullanımına ilişkin bir örnek göstermektedir.
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
anchor-size
demosuBağlayıcı, pop-over ve iletişim kutusu gibi üst katman öğeleriyle birlikte kullanın
Yer işareti konumlandırması, popover
gibi üst katman öğeleriyle son derece iyi sonuç verir. ve <dialog>
. Bu öğeler, DOM alt ağacının geri kalanından ayrı bir katmana yerleştirilirken, sabit konumlandırma, bunları tekrar bağlamanıza ve üst katmanda olmayan öğelerle birlikte kaydırmanıza olanak tanır. Bu, katmanlı arayüzler için büyük bir kazançtır.
Aşağıdaki örnekte, bir dizi ipucu pop-up'ı bir düğme kullanılarak tetiklenir. Düğme, sabit ve ipucu, konumlandırılmış öğedir. Konumlandırılan öğenin stilini, diğer sabit öğeler gibi belirleyebilirsiniz. Bu örnekte, anchor-name
ve position-anchor
, düğme ve ipucundaki satır içi stillerdir. Her sabit öğenin benzersiz bir bağlayıcı adı gerektiğinden, dinamik içerik oluştururken satır içine alma bunu yapmanın en kolay yoludur.
popover
ile çapa kullanarak demo yapma@position-try
ile sabitleme konumlarını ayarlayın
İlk sabit konumu belirledikten sonra, kenet, bulunduğu bloğun kenarlarına ulaşırsa konumu ayarlamak isteyebilirsiniz. Alternatif sabitleme konumları oluşturmak için position-try-options
özelliğiyle birlikte @position-try
yönergesini kullanabilirsiniz.
Aşağıdaki örnekte, menünün sağında bir alt menü görünür. Menüler ve alt menüler, popover özelliğiyle birlikte sabit konumlandırma API'sının mükemmel bir kullanımıdır. Bunun nedeni, bu menülerin genellikle bir tetikleyici düğmesine sabitlenmesidir.
Bu alt menü için, yatay olarak yeterli alan yoksa bunun yerine onu menünün altına taşıyabilirsiniz. Bunu yapmak için önce başlangıç konumunu ayarlayın:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
Ardından @position-try
kullanarak yedek sabit konumlarınızı ayarlayın:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
Son olarak, ikisini position-try-options
ile bağlayın. Tümü birlikte şöyle görünür:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
popover
Sabit konum otomatik çevirme anahtar kelimeleri
Yukarıdan aşağıya veya soldan sağa (ya da her ikisini de) çevirme gibi temel bir ayarlamanız varsa özel @position-try
bildirimleri oluşturma adımını atlayabilir ve flip-block
ve flip-inline
gibi tarayıcı destekli yerleşik çevirme anahtar kelimelerini kullanabilirsiniz. Bunlar özel @position-try
bildirimleri için yedek olarak çalışır ve birbiriyle birlikte kullanılabilir:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
Çevirme anahtar kelimeleri, sabit kodunuzu önemli ölçüde basitleştirebilir. Yalnızca birkaç satır kullanarak alternatif konumlar içeren tam işlevli bir çapa oluşturabilirsiniz:
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
position-try-options: flip-block
ile otomatik çevirmeyi kullanmaAlt kaydırıcılardaki sabitler için position-visibility
Bir öğeyi sayfanın alt kaydırma çubuğu içine sabitlemek isteyebileceğiniz bazı durumlar vardır. Böyle durumlarda, sabit öğenin görünürlüğünü position-visibility
kullanarak kontrol edebilirsiniz. Anchor ne zaman görünür durumda kalır? Ne zaman kaybolur? Bu özellikle, bu seçenekler üzerinde kontrol sahibi olursunuz. Konumlandırılan öğenin, sabitlenene kadar görünümde kalmasını istiyorsanız position-visibility: anchors-visible
parametresini kullanırsınız:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
position-visibility: anchors-visible
DemoAlternatif olarak, bağlayıcının kapsayıcısından taşmasını önlemek için position-visibility: no-overflow
kullanabilirsiniz.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
position-visibility: no-overflow
DemoÖzellik algılama ve çoklu doldurma
Tarayıcı desteği şu anda sınırlı olduğundan bu API'yi bazı önlemler alarak kullanmak isteyebilirsiniz. İlk olarak, @supports
özellik sorgusunu kullanarak desteği doğrudan CSS'de kontrol edebilirsiniz. Bunu yapmanın yolu, sabit stillerinizi aşağıda belirtilen şekilde sarmalamaktır:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
Ayrıca Firefox 54, Chrome 51, Edge 79 ve Safari 10'da çalışan Oddbird'ün CSS bağlayıcı konumlandırması polyfill'i ile çapa konumlandırma özelliğine çoklu dolgu yapabilirsiniz. Bu çoklu dolgu, temel sabitleyici konumu özelliklerinin çoğunu destekler, ancak mevcut uygulama henüz tamamlanmamıştır ve bazı eski söz dizimi içerir. pkg bağlantısını kullanabilir veya doğrudan bir paket yöneticisine içe aktarabilirsiniz.
Erişilebilirlikle ilgili bir not
Çapa konumlandırma API'si bir öğenin diğerlerine göre konumlandırılmasına izin verse de, söz konusu öğeler arasında doğası gereği herhangi bir anlamlı semantik ilişki oluşturmaz. Sabit öğe ve konumlandırılan öğe arasında gerçekten anlamsal bir ilişki varsa (örneğin, konumlandırılan öğe, bağlantı metniyle ilgili bir kenar çubuğu yorumuysa) bunu yapmanın bir yolu, bağlantı öğesinden konumlandırılan öğelere işaret etmek için aria-details
kullanmaktır. Ekran okuyucu yazılımı, arya ayrıntılarıyla nasıl başa çıkılacağını öğrenmeye devam ediyor ancak sağlanan destek iyileşiyor.
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
Sabit konumlandırmayı popover
özelliğiyle veya <dialog>
öğesiyle kullanıyorsanız tarayıcı, uygun erişilebilirlik için odakta gezinme düzeltmelerini işleyeceğinden pop-up'larınızı veya iletişim kutularınızı DOM sırasına almanız gerekmez. Spesifikasyondaki erişilebilirlik ile ilgili not hakkında daha fazla bilgi edinin.
Sonuç
Bu yepyeni bir özelliktir ve bu özellikle birlikte geliştireceğiniz özellikleri görmek için sabırsızlanıyoruz. Şimdiye kadar topluluk tarafından grafiklerdeki dinamik etiketler, bağlayıcı satırları, dipnotlar ve görsel çapraz referans gibi oldukça kullanışlı bazı kullanım alanlarına şahit olduk. Çapa konumlandırmayla ilgili denemeler yaparken geri bildiriminizi almaktan memnuniyet duyarız. Herhangi bir hata bulursanız bize bildirin.