Pozisyon - CSS Hileleri | CSS Almanak 2024

positionMülkiyet Örneğin, bir elemanın konumunu manipüle yardımcı olabilir:

.element ( position: relative; top: 20px; )

Orijinal konumuna göre, yukarıdaki öğe şimdi üstten 20 piksel sürüklenecek. Bu özellikleri canlandıracak olsaydık, bunun bize ne kadar kontrol sağladığını görebiliriz (ancak bu, performans açısından iyi bir fikir değildir):

relativepositionözellik için altı değerden yalnızca biridir . İşte diğerleri:

Değerler

static: her öğenin varsayılan olarak statik bir konumu vardır, bu nedenle öğe normal sayfa akışına sadık kalır. Bu nedenle, bir sol / sağ / üst / alt / z-endeksi kümesi varsa, o zaman bu öğe üzerinde hiçbir etkisi olmayacaktır.
relative: bir öğenin orijinal konumu, tıpkı staticdeğer gibi belgenin akışında kalır . Ama şimdi sol / sağ / üst / alt / z-endeksi çalışacak. Konum özellikleri, öğeyi orijinal konumundan o yönde "iter".
absolute: öğe belgenin akışından çıkarılır ve diğer tüm konumsal özellikler üzerinde çalışırken diğer öğeler orada bile değilmiş gibi davranır.
fixed: öğe, kesinlikle konumlandırılmış öğeler gibi belgenin akışından çıkarılır. Aslında hemen hemen aynı şekilde davranırlar, yalnızca sabit konumlandırılmış öğeler her zaman belgeye bağlıdır, belirli bir ana öğeye göre değildir ve kaydırmadan etkilenmezler.
sticky(deneysel): Öğe, relativegörüntü portunun kaydırma konumu, belirli bir eşiğe ulaşana kadar bir değer olarak değerlendirilir ; bu noktada öğe, fixedyapışması söylenen bir konum alır .
inherit: positiondeğer art arda sıralanmaz, bu nedenle bu özellikle onu zorlamak için inheritve üst değerden konumlandırma değeri için kullanılabilir .

Mutlak

Bir alt öğenin bir absolutedeğeri varsa, o zaman üst öğe, çocuk orada yokmuş gibi davranacaktır:

.element ( position: absolute; )

Ve biz ne zaman gibi diğer değerleri ayarlamak için deneyin left, bottomve rightbiz alt öğe üst biriminin boyutlarına değil yanıt, doküman olduğunu göreceksiniz:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Alt öğeyi ana öğesinden kesinlikle konumlandırmak için, bunu ana öğenin kendisinde ayarlamamız gerekir:

.parent ( position: relative; )

Gibi Şimdi özellikler left, right, bottomve topbiz alt öğe şeffaf yaparsanız bu yüzden bunun üst sayfanın alt kısmında sağ oturan görebilirsiniz, üst öğe sevk edecektir:

Sabit

fixedDeğer benzer absoluteancak bu değer ilerleyerek etkilenmez, bu belgeye her yerde göreceli bir öğe konumlandırmak yardımcı olabilir olarak. Aşağıdaki demodaki alt öğeye bakın ve kaydırdıktan sonra sayfanın alt kısmına nasıl yapışmaya devam ettiğini görün:

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom	Firefox	IE	Kenar	Safari
4	2	7	12	3.1

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Yapışkan

stickyDeğeri arasında bir uzlaşma gibidir relativeve fixeddeğerler. Bu yazı itibariyle, şu anda deneysel bir değerdir, yani resmi spesifikasyonun bir parçası değildir ve yalnızca belirli tarayıcılar tarafından kısmen benimsenmiştir. Başka bir deyişle, bunu bir canlı prodüksiyon web sitesinde kullanmak muhtemelen en iyi fikir değildir.

Bu ne işe yarıyor? Eh, bir öğeyi belgedeki herhangi bir şeye göre konumlandırmanıza olanak tanır ve daha sonra, bir kullanıcı görüntü alanında belirli bir noktayı kaydırdığında, öğenin konumunu o konuma sabitleyin, böylece kalıcı olarak bir öğe gibi görüntülenmeye devam eder. fixeddeğer.

Aşağıdaki örneği ele alalım:

.element ( position: sticky; top: 50px; )

Öğe, görüntü alanının kaydırma konumu, öğenin 50pxgörüntü alanının üstünden olacağı bir noktaya ulaşana kadar göreceli olarak konumlandırılacaktır . Bu noktada, eleman, yapışkan hale gelir ve bir kalır fixedpozisyon 50pxekranın üst.

Aşağıdaki demo, üst gezinmenin varsayılan relativekonumlandırma olduğu ve ikinci gezinmenin stickygörünüm penceresinin en üstüne ayarlandığı o noktayı göstermektedir . Demo'nun bu yazının yazıldığı tarihte yalnızca Chrome, Safari ve Opera'da çalışacağını lütfen unutmayın.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.