Divi'deki Göreli Konumu Anlama ve Kullanma

Göreceli konum özelliği, konum türlerinin belki de en gizemlisidir. Ancak, nasıl çalıştığını anladığımızda, Divi'de bir site tasarlarken bunu avantajımız için kullanabiliriz. Bulduklarımız sizi şaşırtabilir.

Bu yazıda şunları ele alacağız:

• Divi'nin Dört Konumlandırma Türüne Genel Bir Bakış
• Göreceli Konum Divi'de Bir Öğeyi Nasıl “Konumlandırır”
• Divi'de Göreli Konumu Kullanmak için 5 Neden
• Göreceli Konum ve Marj
• Göreli Konum ve Dönüşüm Çevirisi

Bunu kontrol et!

Divi'nin Dört Konumlandırma Türüne Genel Bakış

Göreceli konum, Divi'de bulunan dört konum türünden biridir. Aşağıda her birine hızlı bir genel bakış verilmiştir.

Statik (Varsayılan)

Statik öğeler, sayfadaki öğelerin normal akışı veya düzeniyle kaldıkları ve diğer konumlandırılmış öğeler gibi üst, sağ, alt ve sol özelliklere yanıt vermedikleri için teknik olarak “konumlandırılmazlar” (bu nedenle statik/varsayılan konumdaki öğeler için Divi'de ofsetler mevcuttur). Divi'de bir modül için varsayılan konumu seçtiğimizde, statik konumu seçiyoruz. Divi'deki bazı öğelerin (satırlar ve bölümler gibi) varsayılan olarak göreceli bir konuma sahip olacağını (statik konum değil) belirtmekte fayda var.

Akraba

Göreceli olarak konumlandırılmış öğeler, sayfanın normal akışını takip ettikleri için statik öğelere benzer. Temel fark, göreceli olarak konumlandırılmış öğelerin üst, alt, sol ve sağ özellikleri kullanılarak konumlandırılabilmesidir. Ayrıca statik elemanlardan farklı olarak Z İndeksi özelliği kullanılarak da konumlandırılabilirler.

mutlak

Kesinlikle konumlandırılmış bir öğe, normal belge akışından ayrılır ve bu nedenle, öğe için sayfada gerçek bir alan oluşturulmaz. Sayfada gerçek yer kaplayan diğer öğelerin üzerinde yüzen bir öğe olarak düşünebiliriz. En yakın konumlandırılmış ana konteynere göre konumlandırılacaktır.

Sabit

Mutlak konum gibi, sabit konumlu öğeler de sayfanın normal akışının dışına çıkar ve sayfa içinde gerçek bir boşluk oluşturulmaz. Mutlak ve sabit arasındaki temel fark, sabit konumun tarayıcı penceresine veya görünüm alanına göre olmasıdır. Başka bir deyişle, öğe sayfanın normal akışı içinde nerede olursa olsun, bir kez sabit bir konum verildiğinde, konumu artık doğrudan tarayıcı penceresiyle ilgili olacaktır. Öğeyi görünüm penceresi içinde konumlandırmak için üst, alt, sol ve sağ özelliklerini kullanabiliriz. Sabit öğeler genellikle sayfadaki diğer öğelerin arkasında veya önünde duracağından, Z İndeksi sabit öğeleri diğerlerinin üzerinde sıralamaya yardımcı olur.

NOT: CSS'de yapışkan olarak adlandırılan başka bir konumlandırma türü vardır. Yapışkan bir şekilde konumlandırılmış bir öğe, biz kapsayıcısına (en üst değer tarafından belirlenen bir noktada) kaydırılana kadar nispeten konumlanmış bir öğe gibi davranır. Ardından, kullanıcı kapsayıcının sonuna gelene kadar öğe sabitlenir (veya takılı kalır). Bununla birlikte, diğer faktörler işlevselliği engelleyebileceğinden, yapışkan konum biraz tahmin edilemez olabilir. Divi'de, bu nedenle yerleşik seçeneklerde yapışkan seçeneği mevcut değildir. Ancak Divi'de “position:sticky” kullanmanın yolları vardır.

Göreceli Konum, Divi'de bir öğeyi nasıl “konumlandırır”?

Genel bakışta belirtildiği gibi, Göreli konum türü, öğe belgenin normal akışında (sayfadaki HTML) kaldığı için statik "konum"a benzer. Gerçek fark, bir öğeyi göreli konumla atadığımızda, artık öğeyi konumlandırmak için yeni seçeneklere sahip olmasıdır. Bu seçenekler, Z İndeksi özelliğinin yanı sıra üst, alt, sol ve sağ özellikleri içerir.

Divi'de, bu ek konum seçenekleri, ilgili konum seçildikten sonra konum seçeneği grubu altında bulunabilir.

Göreli Konumla Ofsetleri Kullanma

Ofset Origin ve Offset değerleri, öğemizi ana kapsayıcı içinde istediğimiz herhangi bir yere konumlandırmak için birlikte çalışır. Bu örnekte, göreli konumu, sol üst konumu, dikey konumu 25 piksel ve yatay konumu 25 piksel olan bir modülümüz var. Ofset değerlerinin elemanı yatay ve/veya dikey olarak ofset orijininden nasıl uzaklaştıracağına dikkat edin.

İşte aynı modül, aynı ofsetlere sahip ancak sağ üst offset orijine sahip.

İşte aynı ofsetlere ve sağ alt ofset orijine sahip aynı modül.

Ve işte aynı modül, aynı ofsetlere ve bir sol alt offset orijine sahip.

Boşluk Sürprizleri Yok

Göreceli konumlandırma ile, elemanın gerçek alanı, eleman ofsetler (üst, alt, sol, sağ) kullanılarak hareket ettirildikten sonra orijinal yerinde kalır. Öğenin yeni konumu, sayfadaki diğer öğelerin boşluklarını hareket ettirmez veya etkilemez. Temelde vücudunu terk eden bir ruh gibi diğer elementlerin üzerinde gezinir.

Göreceli Konumu Kullanma Nedenleri

#1 Kesinlikle Konumlandırılmış Öğeler için Bir Üst Kapsayıcı Oluşturma

Bu muhtemelen göreli konum türünün en popüler uygulamasıdır. Mutlak olarak konumlandırılmış herhangi bir öğe, en yakın konumlandırılmış ataya göreli olduğundan, atalarından birini ona göreli bir konum vererek konumlanmış bir öğe yapmayı seçebiliriz (varsayılan statik konum teknik olarak "konumlandırılmaz"). Bu, belge akışını yerinde tutar (statik gibi) ve mutlak öğeler için bir kap seçmemize izin verir.

#2 Sayfadaki Diğer Öğeleri Etkilemeden Öğeleri Taşımak.

Göreceli konumla, diğer öğeleri etkilemeden öğeleri hizaya sokmak için ofsetleri kullanabiliriz. Ve Divi ile öğeleri gerçek zamanlı olarak görsel olarak konumlandırmak için sürüklenebilir kullanıcı arayüzünden yararlanabiliriz.

#3 Örtüşen Diğer Öğeler İçin Z İndeksini Kullanmak

Varsayılan olarak, statik öğeler, göreli konum verilmedikçe z ekseninde yeniden sıralanamaz. Göreceli konumdayken, öğe belgenin normal akışında konumlanmış olarak kalacaktır. Ancak şimdi, öğeleri birbiriyle örtüşürken belirli bir sıraya yerleştirmek için Z İndekslemeden yararlanma olanağına sahibiz.

#4 Pozisyon Amaçlı Negatif Marj Kullanmaktan Kaçınmak İçin

Göreceli konumlandırma, orijinal konumunun alanını geride bırakacaktır. Bununla birlikte, negatif bir marjla, hem içerik hem de orijinal alanı yeniden konumlandırılır. Örneğin, Divi'deki bir satıra, satırın üstündeki satırla çakışması için negatif bir üst kenar boşluğu eklersek, tüm satırlar/içerik onunla birlikte yukarı hareket eder. Bu, bunun yerine göreceli konum ofsetlerini kullanarak önlenebilecek, temizlenmesi gereken biraz karışıklık bırakır.

Bir modülü yukarı doğru hareket ettirmek için negatif bir üst kenar boşluğu kullandığımızda neler olduğuna dair bir örnek. Aşağıdaki öğelerin geri kalanının bununla nasıl ortaya çıktığına dikkat edin.

Aynı modüle göreli 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ıklıkla negatif bir kenar boşluğu kullanmış olsam da, bunun yerine göreli konumlandırmayı kullanabilmemiz muhtemelen iyi bir fikir değildir. Kenar boşluğu, öğenin kutu modülüyle ilgilidir, bu nedenle, öğeyi göreli konumlandırmada olduğu gibi üst kabından ofsetini konumlandırmak için çok fazla değil, gerçekten öğenin içine ve etrafına boşluk eklemek içindir.

Göreli Konum ve Dönüştürme Çevirisi

Göreceli konum, bir sayfadaki konum öğelerine dönüşüm çevirisini kullanmaya gerçekten benzer. Her ikisi de, gerçek alanı orijinal yerinde bırakarak ve sayfadaki diğer öğeleri etkilemeden öğeyi hareket ettirir.

Çeviri, Animasyon ve Geçişler için Daha İyidir (fareyle üzerine gelme efektleri gibi)

Ancak, daha hızlı ve daha yumuşak geçişler sağladığından, çeviri animasyon ve geçişler için (vurgulu efektler gibi) en iyisi gibi görünüyor. Göreli bir öğeyi canlandırmak veya geçiş yapmak için üst, alt, sol ve sağ ofsetleri kullanmak daha dalgalı olabilir ve tarayıcımızın ihtiyaç duyduğundan daha fazla çalışmasına neden olabilir.

Göreli Uzunluk Birimleri Farklı Yanıt Veriyor

Duyarlı tasarım için göreli uzunluk birimlerini (% veya vw gibi) kullanıyorsak, bunlar göreli konum ve dönüşüm çevirisi ile farklı şekilde çalışacaktır.

Göreceli konumu ve yatay ofseti %50 olan bir Divi modülü, modülü yatay olarak üst kapsayıcının (veya sütunun) genişliğinin %50'sine eşit miktarda hareket ettirir.

Dönüştürme çevirisi (X ekseni) %50 olan bir Divi modülü, modülü yatay olarak, modülün kendisinin genişliğinin %50'sine eşit miktarda hareket ettirir.

Göreceli Konum ve Dönüşümü Birleştirme Merkez Öğelerine Çevirme

Az önce ele aldığımız gibi, göreli konum ebeveyne göredir ve transform translate özelliği öğenin kendisine göredir. Bu nedenle, öğeleri tam istediğimiz gibi konumlandırmak için her ikisini birlikte kullanabiliriz. Bu tekniği, öğeleri kaplarında ortalamak için bile kullanabiliriz.

Örneğin, modülü sütun genişliğinin tam olarak %50'si kadar sağa konumlandırmak için göreli konum yatay ofsetini kullanabiliriz.

Ardından, modülü (modül genişliğinin) %50'sini sola taşımak için translate özelliğini kullanın. Bu, modülün genişliği ne olursa olsun modülün sütunun ortasında kalmasını sağlayacaktır.

Son düşünceler

Bu makaleyi yazmadan önce benim gibiyseniz, muhtemelen göreceli konum türünü çok iyi anlamadınız veya kullanmadınız. Bu göreceli konumun belki de en şaşırtıcı yönü, sayfadaki tasarımın geri kalanını nasıl etkilediğidir (veya etkilemediğidir). Yalnızca mutlak öğelerle birlikte çalışmakla kalmaz, aynı zamanda mükemmel noktada konum öğelerine dönüştürme ile de iyi çalışır.

Göreceli konum türüyle ilgili deneyiminiz nedir?

Yorumlarda sizden haber bekliyorum.

Şerefe!