Üst / alt / sol / sağ - CSS Hileleri

top, bottom, leftVe rightözellikleri, bir elemanın yerleştirilmesini ayarlamak için pozisyon ile birlikte kullanılır. Yalnızca, positionözelliği dışında herhangi bir değere ayarlanmış öğeler olan konumlandırılmış öğeler üzerinde etkisi vardır static. Örneğin: relative, absolute, fixedya da sticky.

div ( : || || auto || inherit; )

Örneğin, bir simgeyi yerine itmek için kullanabilirsiniz:

button .icon ( position: relative; top: 1px; )

Veya bir kabın içine özel bir eleman yerleştirin.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Değeri için top, bottom, leftve rightaşağıdakilerden herhangi biri olabilir:

• geçerli CSS uzunluklarından herhangi biri
• içeren öğenin yüksekliğinin (için topve bottom) veya genişliğinin (için leftve right) yüzdesi
• auto
• inherit

Öğe, genellikle değeri pozitif olduğunda belirli bir taraftan uzaklaşır ve değer negatif olduğunda ona doğru hareket eder. Aşağıdaki örnekte top, elemanı aşağı (yukarıdan uzağa) tophareket ettirmek için pozitif bir uzunluk ve elemanı yukarı (yukarı doğru) hareket ettirmek için negatif bir uzunluk :

CodePen'de Matsuko Friedland (@missmatsuko) tarafından Kalem Üstü: pozitif ve negatif değerler
.

Durum

Bir değere sahip bir elemanın yerleştirilmesi top, bottom, left, veya rightonun değerine bağlıdır position. topFarklı değerlere sahip öğeler için aynı değeri ayarladığımızda ne olduğuna bir bakalım position.

static

topMülkiyet unpositioned elemanları ile (elemanlar üzerinde hiçbir etkisi yoktur positioniçin sette static). Öğeler varsayılan olarak bu şekilde konumlandırılır. Bir öğe üzerindeki position: static;etkisini geri almak için bir yöntem olarak kullanabilirsiniz top.

relative

Değerine topayarlanmış bir öğeye positionayarlandığında relative, öğe belgedeki orijinal yerleşimine göre yukarı veya aşağı hareket eder.

CodePen'de Matsuko Friedland (@missmatsuko) tarafından Kalem Üstü: göreli
.

absolute

Değerine topayarlanmış bir öğeye positionayarlandığında absolute, öğe en yakın konumlandırılmış atasına (veya konumlandırılmış üst öğeler yoksa belge) göre yukarı veya aşağı hareket eder.

Bu demoda, soldaki pembe kutu, konumlandırılmış üst öğe içermediği için sayfanın üst kısmından 50px aşağı konumlandırılmıştır. Ebeveyn çünkü sağdaki pembe kutu Onun ailesine üstünden 50px aşağı konumlandırılmış positionbir relative.

CodePen'de Matsuko Friedland (@missmatsuko) tarafından Kalem Üstüne bakın : mutlak
.

fixed

Değerine topayarlanmış bir öğeye positionayarlandığında fixed, öğe tarayıcının görüntü alanına göre yukarı veya aşağı hareket eder.

Kalem
Üstü:
CodePen'de CSS-Tricks (@ css-tricks) tarafından düzeltildi.

İlk bakışta, absoluteve arasında bir fark yokmuş gibi görünebilir fixed. Aradaki fark, kaydırmak için yeterli içeriğe sahip bir sayfada bunları karşılaştırdığınızda görülebilir. Siz aşağı kaydırdıkça fixed, absolutekonum öğesi uzaklaşırken konum öğesi her zaman görünür durumdadır.

Kalem
Kaydırma'ya bakın :
CodePen'de CSS-Tricks (@ css-tricks) ile sabit ve mutlak karşılaştırması.

sticky

Değerine topayarlanmış bir öğeye positionayarlandığında sticky, öğe, en yakın ataya göre bir kaydırma kutusu (veya herhangi bir atanın bir kaydırma kutusu yoksa görünüm penceresi), kapsayıcı öğesinin sınırları ile sınırlı olarak yukarı veya aşağı hareket eder.

Ayarlama topbir üzerinde stickykonumlandırılmış elemanın kabını olduğundan daha uzun boylu olmadıkça çok fazla bir şey ve kaydırma için yeterli içeriğe sahip değil. İle olduğu fixedgibi, siz kaydırdıkça öğe görüntüde kalacaktır. Aksine fixed, içerdiği öğenin kenarlarına ulaştığında öğe görüntüden düşecektir.

Kalem
Kaydırma:
CodePen'de CSS-Püf Noktaları (@ css-tricks) tarafından düzeltilene karşı yapışkan'a bakın.

Gotchas

Zıt tarafların belirlenmesi

Sen her biri için bir değer ayarlayabilirsiniz top, bottom, left, ve righttek bir eleman. Zıt taraflar ( topve bottom, veya leftve right) için değerler belirlediğinizde , sonuç her zaman beklediğiniz gibi olmayabilir.

Çoğu durumda, bottomeğer yok sayılır topzaten ayarlanır ve righteğer yok sayılır leftzaten ayarlanır. Yön rtl(sağdan sola) olarak ayarlandığında , leftbunun yerine yok sayılır right. Bir etkiye sahip her değer için amacıyla, eleman bir zorunluluk positioniçin grubu absoluteya da fixedve heightkümeyi auto(varsayılan).

Bu örnekte, set top, bottom, leftve right20px` 'için ve dış kutunun kenarlarına uzak 20 piksel için, iç kutunun her iki yanına beklemek:

CodePen'de
CSS-Tricks (@ css-tricks) tarafından üst, alt, sol ve sağ Kalem Ayarına bakın
.

Sabit olduğunda, görüntü alanına göre değil

Değerine positionayarlanmış öğeler fixedher zaman görünüm alanına göre konumlandırılmaz. Bu bir ile en yakın atası göre konumlanacak olan transform, perspectiveya filterdışında bir özellik seti noneeğer varsa.

Boşluk ekleme veya kaldırma

Bir öğeyi konumlandırdıysanız ve şimdi boş bir alan olduğunu veya beklediğiniz yerde yeterli alan olmadığını fark ettiyseniz, öğenin belge akışının içinde veya dışında olmasıyla ilgili olabilir.

Bir öğe belgenin akışından çıkarıldığında, sayfada başlangıçta kapladığı alanın kaybolduğu anlamına gelir. Bu, bir eleman konumlandırıldığında absoluteveya fixed. Bu örnekte, mutlak olarak konumlandırılmış öğenin belge akışından kaldırılması nedeniyle mutlak konumlandırılmış öğenin kapsama kutusu daraltılmıştır:

CodePen'de Matsuko Friedland (@missmatsuko) tarafından hazırlanan Kalem Belgesi akışına bakın
.

Tarayıcı Desteği

Bir göz atabilirsiniz, ancak topmülk için tarayıcılar arası herhangi bir endişeniz yoktur . İstediğiniz zaman kullanın.