Göreceli konum özelliği, konum türlerinin belki de en gizemlisidir. Bununla birlikte, nasıl çalıştığını anladığımızda, mizanpajları tasarlarken avantajımız için kullanabiliriz. Divi. Bu eğitimde yeni şeyler öğreneceksiniz.
Gerçekten de, bu derste şunları tartışacağız:
- Dört konumlandırma türüne genel bakış Divi
- Göreceli konumun bir öğeyi nasıl “konumlandırdığı” Divi
- Divi'deki göreceli konumun kullanılmasını haklı gösteren 4 neden
- Göreceli konum ve marj
- Transformer'a karşı Göreli pozisyon
Divi'nin dört tip konumlandırmasının sunumu
Göreceli konum, Divi'de bulunan dört konum türünden biridir. Aşağıda her birine hızlıca bir göz atın.
Statik (varsayılan)
Teknik olarak statik öğeler, sayfadaki öğelerin normal akışı veya düzeninde kaldıkları için "konumlandırılmaz" ve diğer konumlandırılmış öğeler gibi üst, sağ, alt ve sol özelliklere yanıt vermezler (ör. Divi'de statik / varsayılan konumdaki öğeler için ofsetlerin hiçbirinin bulunmamasının nedeni budur). Divi'de bir modül için varsayılan konumu seçtiğimizde statik konumu seçiyoruz. Ayrıca Divi'nin bazı öğelerinin (çizgiler ve bölümler gibi) varsayılan olarak göreceli bir konuma (statik konum değil) sahip olacağı da belirtilmelidir.
bağıl
Nispeten konumlandırılmış öğeler, sayfanın normal akışını takip etmeleri bakımından statik öğelere çok benzer. Temel fark, görece konumlandırılmış öğelerin üst, alt, sol ve sağ özellikleri kullanılarak konumlandırılabilmesidir. Ek olarak, statik öğelerden farklı olarak, Z Index özelliği kullanılarak da konumlandırılabilirler.
kesin
Kesin olarak konumlandırılmış bir öğe, normal belge akışından çıkar ve bu nedenle, öğe için sayfada gerçek alan yaratılmaz. Bunu, sayfadaki gerçek yer kaplayan diğer öğelerin üzerinde kayan bir öğe olarak düşünebiliriz. En yakın üst kaba göre konumlandırılacaktır.
sabit
Mutlak konum gibi, sabit konuma sahip öğeler de normal sayfa akışının dışına çıkacak ve sayfada gerçek bir alan oluşturulmayacaktır. Mutlak ve sabit arasındaki temel fark, sabit konumun pencereye veya tarayıcı penceresine göre olmasıdır. Başka bir deyişle, öğe sayfanın normal akışında nerede olursa olsun, sabit bir konum verildikten sonra, konumu artık doğrudan tarayıcı penceresine bağlanacaktır. Öğeyi pencerede konumlandırmak için üst, alt, sol ve sağ özelliklerini kullanabiliriz. Sabit öğeler genellikle sayfadaki diğer öğelerin arkasında veya önünde durduğundan, Z Dizini, sabit öğelerin diğerlerinin üzerinde sıralanmasına yardımcı olur.
NOT: CSS'de yapışkan adı verilen başka bir konumlandırma türü vardır. Yapışkan konumlandırılmış bir öğe, biz onun kapsayıcısına kaydırılıncaya kadar (en üst değer tarafından belirlenen bir zamanda) görece konumlandırılmış bir öğe gibi davranır. Ardından öğe, kullanıcı kabın sonuna kaydırılıncaya kadar sabitlenir (veya sıkışır). Ancak, diğer faktörler işlevselliği engelleyebileceği için yapışkan konum biraz öngörülemez olabilir. Divi'de, bu nedenle yapışkan seçeneği yerleşik seçeneklerde mevcut değildir. Bununla birlikte, Divi'de "position: sticky" kullanmanın yolları vardır.
Göreli konum Divi'de bir öğeyi nasıl "konumlandırır"
Önizlemede belirtildiği gibi, Bağıl konum türü statik "konuma" benzer çünkü öğe, belgenin normal akışında kalır. Gerçek fark, bir öğeyi göreceli konuma atadığımızda, artık öğeyi konumlandırmak için yeni seçeneklere sahip olmasıdır. Bu seçenekler, üst, alt, sol ve sağ özelliklerin yanı sıra Z Dizini özelliğini içerir.
Divi'de, bu ek konum seçenekleri, göreceli konum seçildikten sonra konum seçeneği grubu altında bulunabilir.
Göreli konumlu ofsetleri kullanma
Origin Offset ve Offset değerleri, öğemizi üst konteynerde istediğimiz yere konumlandırmak için birlikte çalışacaktır. Bu örnekte, göreli konumu, sol üst ofseti, 25 piksellik dikey ofseti ve 25 piksellik yatay uzaklığı olan bir modülümüz var. Öteleme değerlerinin elemanı öteleme başlangıcından yatay ve / veya dikey olarak uzağa nasıl hareket ettireceğine dikkat edin.
Burada aynı ofsetlere sahip ancak sağ üstte ofset orijinli aynı modül var.
Burada aynı ofsetlere ve sağ altta bir ofset orijinine sahip aynı modül bulunmaktadır.
Ve burada aynı ofset ve sol altta bir ofset orijini ile aynı modül var.
Sürpriz boşluk yok
Göreli konumlandırmayla, ögeyi ofsetler (yukarı, aşağı, sola, sağa) kullanarak hareket ettirdikten sonra öğenin gerçek alanı orijinal yerinde kalır. Öğenin yeni konumu hareket etmez ve sayfadaki diğer öğelerin aralığını etkilemez. Temelde vücudunu terk eden bir ruh gibi diğer unsurların üzerinde gezinir.
Neden göreli konum kullanılır?
Sebep 1: Kesinlikle konumlandırılmış elemanlar için bir ana kap yapmak
Bu, muhtemelen göreceli konum türünün en popüler uygulamasıdır. Kesin olarak konumlandırılmış herhangi bir öğe, en yakın konumlandırılmış ataya göre olduğundan, onun atalarından birini, ona göreceli bir konum vererek konumlandırılmış bir öğe yapmayı seçebiliriz (varsayılan statik konum, teknik olarak "konumlandırılmış"). Bu, belge akışını yerinde tutar (statik gibi) ve mutlak öğeler için bir kap seçmemizi sağlar.
Neden 2: Sayfadaki diğer öğeleri etkilemeden öğeleri taşımak için.
Göreli konumla, ötelemeleri diğer elemanları etkilemeden ögeleri hizalamaya itmek için kullanabiliriz. Divi ile öğeleri gerçek zamanlı olarak görsel olarak konumlandırmak için hareketli kullanıcı arayüzünden yararlanabiliyoruz.
Neden 3: Diğer öğelerle örtüşmek için Z endeksini kullanmak
Varsayılan olarak, statik öğeler, göreli konum verilmedikçe z ekseninde yeniden düzenlenemez. Göreceli konuma geldikten sonra, öğe belgenin normal akışında konumlanmış kalacaktır. Ancak şimdi, öğeleri üst üste geldiklerinde belirli bir sıraya yerleştirmek için Z indekslemeden yararlanma olanağına sahibiz.
Sebep 4: Pozisyon amaçları için negatif marj kullanmaktan kaçınmak için
Göreli konumlandırma, orijinal konumunun alanını geride bırakacaktır. Ancak negatif marjla içindekiler ve orijinal uzayının her ikisi de yer değiştirmiştir. Örneğin, Divi'de bir satıra negatif bir üst kenar boşluğu eklersek, satırın üstündeki satırla örtüşmesi sağlanırsa, tüm satırlar / içindekiler onunla birlikte hareket edecek. Bu, göreceli konum ofsetleri kullanılarak önlenebilecek, temizlenmesi gereken bir miktar karışıklık bırakır.
Aynı modülü göreceli bir konum verirsek, sayfadaki boşluğun geri kalanını etkilemeden modülü yukarı getirmek için dikey ofseti kullanabiliriz.
Öğeleri Divi'de konumlandırmak için sık sık negatif kenar boşluğu kullansam da, bunun yerine göreli konumlandırmayı kullanabilirsek muhtemelen iyi bir fikir değildir. Kenar boşluğu, öğenin kutu modülü ile ilgilidir, bu nedenle, öğenin üst konteynerinden uzaklığını konumlandırmak için çok fazla değil, öğenin kendisinin içine ve çevresine boşluk eklemek anlamına gelir. göreli konumlandırma.
Özetlemek
Günün sonunda pek anlamamış olmanız çok muhtemeldir. Göreceli konumu kullanmanın belki de en şaşırtıcı yönü, sayfa tasarımının geri kalanı üzerindeki etkisidir (veya etkisidir). Yalnızca mutlak öğelerle birlikte çalışmakla kalmaz, aynı zamanda öğeleri mükemmel bir yere konumlandırmak için çevrilmiş dönüşümle de iyi çalışır.
kaynak: Zarif Temalar
