Divi'nin Mutlak Konumunu Anlama ve Kullanma Kılavuzu

Mutlak konum özelliği, Divi'nin yeni konum seçeneklerinde bulunan dört ana konum türünden biridir. Bu öğreticide, bir öğeye Divi'de mutlak bir konum vermenin ne anlama geldiğini ve Divi sitelerini tasarlarken bunu kendi avantajınıza nasıl kullanabileceğinizi keşfedeceğiz.

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

• Divi'nin Dört Konumlandırma Türüne Genel Bir Bakış
• Mutlak Konum Divi'de Bir Öğeyi Nasıl “Konumlandırır”
• Divi'de Mutlak Pozisyonu Kullanmanın Yararları ve Dezavantajları
• Mutlak Konum ile Konum Noktalarını Kullanma
• Örnek Kullanım Örneği: Düğmeleri Kesinlikle Aynı Yükseklikte Blur'lar için Konumlandırma

Bunu kontrol et!

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

Mutlak konum, Divi'de bulunan dört konum seçeneğinden 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). Statik konum, herhangi bir CSS öğesi için varsayılan konumdur. Divi'de bir modül için varsayılan konumu seçtiğinizde, statik konumu seçmiş olursunuz. 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. Bunu, sayfada gerçek yer kaplayan diğer öğelerin üzerinde yüzen bir öğe olarak düşünebilirsiniz. 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 alanı içinde konumlandırmak için üst, alt, sol ve sağ özelliklerini kullanabilirsiniz. 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, siz kapsayıcısına (en üst değer tarafından belirlenen bir noktada) kaydırana 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.

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

Genel bakışta bahsedildiği gibi, kesinlikle konumlandırılmış bir eleman, en yakın konumlandırılmış ana konteynere göre konumlandırılacaktır. Konumlandırılmış bir üst kapsayıcı, statik (yani göreli, mutlak, sabit) dışında herhangi bir konum değeri verilen herhangi bir kapsayıcıdır. Bu nedenle çoğu durumda bir öğeyi (bir modül gibi) mutlak olarak ana kabı (veya sütunu) içinde konumlandırmak istiyorsanız, alt modülü kesinlikle konumlandırmadan önce sütuna göreli bir konum vermek isteyeceksiniz. Değilse, kesinlikle konumlandırılmış modül, statik dışında bir konuma sahip en yakın ata için belgeyi/sayfayı daha fazla arayacaktır. Bu nedenle, Divi'de, bölümlerin ve satırların her ikisi de varsayılan olarak göreceli konuma sahiptir, böylece öğeleri kesinlikle bu öğeler içinde kolayca konumlandırabilirsiniz.

Burada, bir sütun için Divi'nin varsayılan konumunu geçersiz kılar ve statik olarak ayarlarsam, kesinlikle konumlandırılmış modülün ne yapacağını gösteren bir örnek verilmiştir. Sütunun artık bir konumu olmadığından, modülün artık konumu (göreli) olan satıra göreli hale geleceğine dikkat edin.

Divi'de Mutlak Konumu Kullanmanın Yararları ve Dezavantajları

Mutlak konum, öğeleri konumlandırmak için çeşitli yöntemlerden yalnızca biridir. Bu nedenle, diğerleri yerine mutlak konumu kullanmanın bazı avantaj ve dezavantajlarını ele almak faydalı olacaktır.

Faydalar

Burada, Dönüştür Çevir veya Kenar Boşlukları gibi diğer konumlandırma özelliklerine göre mutlak konumu kullanmanın birkaç avantajı vardır:

İyi Tasarım Aracı

Mutlak Konum Normal akışın dışına çıkar, böylece konumlandırma gerçekleştikten sonra elemanın gerçek alanı tasarımı etkilemez. Bu aynı zamanda bir dezavantaj olsa da, yerleşime ek alan eklemek için gerekebilecek herhangi bir ek temizleme olmaksızın, önceden kurulmuş bir tasarıma öğeler eklemek istediğinizde bu yararlı olabilir. Başka bir deyişle, bunu yapmak için mevcut öğeleri hareket ettirmek zorunda kalmadan sayfaya öğeler ekleyebilirsiniz.

Floatlar ve Marjlara İyi Bir Alternatif

Mutlak konumla, benzer konumlandırmayı gerçekleştirmek için kayan öğelere veya kenar boşluklarına bağımlı olmanız gerekmez. Divi'de yerel bir seçenek olmasa da, CSS'ye aşina olanlar, bazı durumlarda biraz hatalı ve tahmin edilemez olabilen öğeleri sağa veya sola konumlandırmak için kayan noktaları kullanabileceğinizi bilir. Aynı şey, öğeleri konumlandırmak için kenar boşlukları kullanmak için de geçerlidir. Bazen, gereksiz boşluk bırakmadan bir öğeyi tam olarak konumlandırmak için tam kenar boşluğu değerlerini tahmin etmek zordur. Mutlak bir konum kullanmak, hem kayan noktalar hem de kenar boşlukları için iyi bir "hassas konumlandırma" alternatifi olabilir.

İyi Tarayıcı Desteği

Mutlak konum özelliği, tüm büyük tarayıcılarda yaygın olarak desteklenir, bu nedenle, diğer tarayıcılarda beklenmedik bir şekilde işleri bozmayacağına genellikle güvenebilirsiniz.

Dezavantajları

Mutlak Pozisyonu kullanırken göz önünde bulundurulması gereken birkaç dezavantaj:

İzolasyon Riski

Kesinlikle konumlandırılmış öğeler normal belge akışının dışına çıktığı için, yanına ek öğeler eklemek zor olabilir. Sayfadaki diğer öğelerden izole olurlar. Örneğin, normalde Divi'de, bir metin modülünün altına bir düğme eklemek isterseniz, basitçe bir modül ekleyebilirsiniz ve otomatik olarak metin modülünün altında yer alacaktır. Ancak metin modülü mutlak olarak konumlandırılmışsa, düğme modülünü de mutlak olarak konumlandırmanız ve ardından düğmeyi metin modülünün altına yerleştirmek için üst, alt, sol ve sağ özelliklerini kullanmanız gerekir. Bununla birlikte, bir sütunu (ana modül kabı) mutlak olarak konumlandırmak daha kolay olabilir, böylece sütun içindeki tüm modüller normal belge akışını izleyebilir (bir modül yerine bir grup modülü konumlandırmak gibi).

Daha Az Duyarlı

Ayrıca, kesinlikle konumlandırılmış öğeler belge akışından koptuğu için, konumlandırmayı mobil cihazlar için duyarlı hale getirmek zor olabilir. Aslında, birçok geliştirici, duyarlı tasarımın getirdiği zorluklar nedeniyle position:absolute'dan kaçınır. Bu nedenle, gerektiğinde mutlak uzunluk birimleri (px gibi) yerine göreli uzunluk birimlerinin (vw veya % gibi) kullanılması önemlidir.

Mutlak Konum ile Konum Noktalarını Kullanma

Divi oluşturucuda yerleşik olarak bulunan Konum konumu seçenekleri, bir konum noktasını tıklatarak öğeleri kesinlikle basitçe konumlandırmayı gerçekten kolaylaştırır. Konum noktası seçildikten sonra, o konum noktasından ek konum ayarlamaları yapmak için dikey ve yatay ofsetleri kullanabilirsiniz.

Varsayılan olarak, konum noktası sol üstte ayarlanır. Bu nedenle, bu konuma dikey ve yatay ofsetlerin eklenmesi, üstten ve soldan ek boşluklar ekleyecektir.

Sağ üst köşe konumundan, dikey ofset üstten boşluk ekler ve yatay ofset sağa boşluk ekler.

Sağ alt köşe konumundan, dikey ofset alttan boşluk ekler ve yatay ofset sağa boşluk ekler.

Sol alt köşe konumundan, dikey ofset alttan boşluk ekler ve yatay ofset soldan boşluk ekler.

Ortalanmış Mutlak Öğelerde ayarlamalar yapma

Ortalanmış bir konuma sahip bir konum seçeneği seçtiğinizde, Divi, boyutu ne olursa olsun öğenin mükemmel şekilde ortalandığından emin olmak için CSS özelliklerinin bir kombinasyonunu kullanır. Örneğin, sol ortalanmış konumu seçerseniz, Divi öğeyi aşağıdaki gibi konumlandıracaktır:

İşte CSS'nin arka uçta nasıl göründüğü.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Üst:%50, elemanın üst kısmını, kabının üstünden tam olarak %50'ye konumlandırmak için oradadır. transform:translateY(-50%), öğeyi kendi yüksekliğinin tam olarak yarısı kadar yukarı getirmek için oradadır. Bu, yüksekliği ne olursa olsun size mükemmel bir şekilde yerleştirilmiş bir eleman verir.

Ortalanmış bir konumdaki bir öğeye ek ayarlamalar (veya ofsetler) yapmak istemeniz durumunda bunu bilmeniz önemlidir. Halihazırda kullanılan değerleri bilmeden transform translate seçeneğini kullanma hatasına düşmek istemezsiniz. Bu nedenle, ne yaptığınızı anlamadığınız sürece transform translate yerine Divi'deki margin özelliğini kullanarak daha küçük ayarlamalar yapmanız en doğrusu olacaktır.

Birden Çok Mutlak Öğeyi Ortalanmış Konum için Konumlandırmak için Dönüştür Çevirme Seçeneğini Kullanma

transform:translate'in nasıl kullanıldığını anlarsanız, ortalanmış öğeleri, öğenin genişliğini bilmek zorunda kalmadan kaydırmak için gerçekten çok yararlı olabilir.

Örneğin, bir modülü Divi'de bir sütunla hem dikey hem de yatay olarak ortalanacak şekilde konumlandırdığınızı varsayalım. Böyle görünecek.

Öğeye aşağıdaki gibi bir dönüşüm çevirisi verirsem hiçbir şey değişmez:

• Dönüştür Çevir(Y): -%50
• Dönüştür Çevir(X): -%50

Bunun nedeni, Divi'nin bunu sizin için arka uçta otomatik olarak yapmasıdır. Bunu bilerek, transform translate seçeneğini kullanarak orta nokta konumundan ayarlamalar yapabilirsiniz. Yüzde uzunluk birimini kullanırsanız, %100, modülün genişliğine veya yüksekliğine eşit olduğundan, ayarlama yapmak için modülün genişliğini veya yüksekliğini bilmeniz gerekmez. Bu nedenle, sütunun ortasına dört modül eklemek istiyorsanız, kesinlikle konumlandırılmış modüllerin her birini dengelemek için dönüştürme seçeneklerini kullanabilirsiniz.

Bunu yapmak için dört modül oluşturacak ve hepsine dikey ve yatay olarak ortalanmış bir konumla mutlak bir konum vereceksiniz.

Ardından, modüllerin konumunu, modülün genişlik ve yüksekliğinin yüzdesine göre buna göre ayarlamak için transform translate seçeneklerini kullanın. Örneğin, bir modüle -%100'lük bir dönüşüm çevirme Y ekseni değeri vermek, modülü modülün tam yüksekliğine kadar yukarıya getirecektir. Modüle -%100'lük bir X ekseni değeri vermek, modülü modülün tam genişliğinin soluna hareket ettirecektir. Bu, kesinlikle ortalanmış öğeleri birleştirmek için harika bir wat olabilir.

Örnek Kullanım Örneği: Düğmeleri Kesinlikle Aynı Yükseklikte Blur'lar için Konumlandırma

Divi'de mutlak konumu kullanmanın pratik bir uygulaması, bir düğmeye bir sütunun içinde mutlak bir konum vermektir, böylece düğme, üstündeki içeriğin miktarı (veya yüksekliği) değişse bile sütunun altında kalır. Bu, sayfanızdaki öğeleri öne çıkarırken tasarımı tutarlı tutmanın harika bir yolu olabilir.

İşte nasıl yapılacağı.

İlk olarak, bölüme tek sütunlu bir satır ekleyin.

Ardından sütuna bir tanıtıcı modül ekleyin.

Ardından, tanıtım modülünün altına bir düğme modülü ekleyin.

Satır ayarlarını açın ve her biri aynı tanıtım yazısı ve düğme modülüne sahip toplam üç özdeş sütun elde etmek için sütunu iki kez çoğaltın.

Ardından satır ayarlarına gidin ve sütun yüksekliklerini eşitleme seçeneğini seçin. Bu, sütunların en yüksek yüksekliğe (veya çoğu içeriğe) sahip sütunun yüksekliğine ayarlanmasını sağlayacaktır.

Şimdi, her bir tanıtıcı modülünün gövde içeriğini, içerik miktarı her sütunda farklı olacak şekilde güncelleyin. Aşağıdaki düğmenin, tanıtım modülünün hemen altındaki konuma hareket edeceğini ve her bir düğmeyi sütun içinde farklı bir konuma getireceğini görmelisiniz.

Çoklu seçimi kullanarak düğme modüllerinin her birini seçin ve her bir düğme için aşağıdaki öğe ayarlarını güncelleyin:

• Pozisyon: Mutlak
• Konum: Sol Alt

Bu, düğmelerin her birini kesinlikle sütunun sol alt kısmına yerleştirecektir. Ancak düğmeler artık sayfadaki öğelerin normal akışının dışında olduğundan, en soldaki sütunda düğme ve tanıtıcı modül ile bir miktar örtüşme olduğunu fark edeceksiniz. Bunu düzeltmek için, sütuna aşağıdaki gibi biraz dolgu ekleyerek düğme için biraz gerçek alan açmamız yeterlidir:

• Dolgu: 50 piksel alt

Artık, içerik miktarı (veya tanıtım yazısının yüksekliği) değişebilse bile, her biri için tutarlı bir düğme yerleşimine sahip üç öne çıkan öğeniz var.

Son düşünceler

Umarım bu yazı, mutlak pozisyon özelliğine ve Divi'de ne kadar güçlü kullanılabileceğine biraz ışık tutmuştur. Konumun nasıl çalıştığını anladıktan sonra, web sitenizi bir sonraki seviyeye taşıyacak her türlü hassas tasarım öğesini eklemek için kullanabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!