CSS'de, statik (varsayılan) konumlandırma ile göreli konumlandırma arasındaki fark nedir?
Statik ve bağıl konumlandırma arasındaki fark
Yanıtlar:
Statik konumlandırma, öğeler için varsayılan konumlandırma modelidir. Normal HTML akışının bir parçası olarak oluşturuldukları sayfada görüntülenirler. Statik olarak konumlandırılmış elemanlar uymayan left, top, rightve bottomkurallar:
Göreli konumlama Eğer spesifik bir göreli konum (belirlemenizi sağlar left, topHTML akışında öğenin normal konumuna göre değişir vs). Dolayısıyla, bir metin kutusu içinde bir divmetin kutum varsa, normalde aşağıdakiler içinde yerleştirileceği yere göre belirli bir yerde görüntülenmesini sağlamak için metin kutusuna göreceli konumlandırma uygulayabilirim div:
Ayrıca mutlak konumlandırma da vardır - burada öğenin tüm belgeye göre tam konumunu veya öğe ağacının daha yukarısındaki görece konumlandırılmış sonraki öğeyi belirtirsiniz :
Ve position: relativehiyerarşideki bir üst öğeye uygulandığında:
Mutlak konum öğemizin görece konumlandırılmış öğe tarafından nasıl bağlandığına dikkat edin.
Ve son olarak düzeltildi. Sabit konumlandırma, bir öğeyi, kaydırma sırasında yerinde kalan, görüntü alanındaki belirli bir konumla sınırlar:
Ayrıca, sabit konumlu öğelerin kaydırmaya neden olmadığı davranışını da gözlemleyebilirsiniz, çünkü bunlar, görünüm alanına bağlı olarak değerlendirilmezler:
Mutlak konumlandırılmış öğeler hala görüntü alanına bağlıdır ve kaydırmaya neden olur:
.. tabii ki ana öğeniz overflow: ?kaydırmanın (varsa) davranışını belirlemek için kullanır .
Mutlak konumlandırma ve sabit konumlandırma ile öğeler HTML akışından çıkarılır.
İyi yanıt, ancak (göreceli konum için) ofset, öğenin normal konumuna dayalı değil mi?
—
Baztoune
Baztoune'a katılıyorum, göreceli olarak konumlandırılmış elemanlar için bu tanım yanıltıcıdır. A
—
Ryan Williams
staticve relativeeleman aynıdır, ancak ikincisi ile onu içeren öğeye göre değil , orijinal konumuna göre yeniden konumlandırabilirsiniz - burada absolutedevreye girer. Ayrıca, statickullanabileceğinizden farklı bir değer kullanılarak konumlandırılan herhangi bir öğe gibi z-index.
Göreceli konumlandırmayı daha doğru bir şekilde tanımlamak için bu yanıtı yeniden çalıştım ve farklı konum türlerini göstermek için görüntüler ekledim.
—
Matthew Abbott
CSS'nin varsayılan
—
cram2208
position: static;olarak basitçe değiştirmek yerine neden hala uygulandığını merak ediyorum position: relative;? Biri başka bir öğeyi konumlandırmak istemiyorsa top: 0;ve left: 0;o zaman yapmayalım, değil mi? position: static;CSS'nin bir parçası olarak hala gerekli olmasının altında yatan bir neden var mı ?
@ cram2208 göreceli, çocukların mutlak konumlandırılmış düğümlerin kendilerine göre konumlandırılmasını sağladığı için statik, mutlak konumlandırılmış çocukların konumlarını göz ardı etmelerine ve en yakın göreceli konumlandırılmış öğeye göre konumlandırılmalarına izin verir. Sahip
—
olunması
Burada basit bir genel bakış görebilirsiniz: W3School
Ayrıca, doğru hatırlıyorsam, bir elemanı göreceli olarak ilan ederken, varsayılan olarak olması gerektiği gibi aynı yerde kalacaktır, ancak içindeki elemanları bu elemana göre kesinlikle konumlandırma becerisi kazanırsınız ki bu çok yararlı buldum geçmişte.
w3schools ... Buna olumsuz oy vermeyeceğim ama utançla yaşamalısın.
—
Myles Grey
Bu arada, 2017'de W3Schools eskisi kadar kötü değil (hala mükemmel değil, ancak topluluğun tepkisini ciddiye aldılar ve gerçekten iyileştirdiler).
—
Priidu Neemre
Bu arada, 2018'de W3Schools hala eskisi kadar kötü değil, ancak bugün bile itibarlarının hala diğer geliştiricilere yukarıdaki ilk yorumdan bahsetmek klasik bir kıkırdama sürdüğü için üzülüyorlar ... geri benim günümde ... W3School .... ilk izlenimler hey ...
—
redfox05
"CSS neden hala konumu uyguluyor: statik" sorusuna yanıt olarak; bir senaryoda, bir ebeveyn için göreceli ve konum: çocuk için mutlak kullanımı, çocuğun ölçekleme genişliğini sınırlar. Bağlantıların 'sütunlarına' sahip olabileceğiniz yatay bir menü sisteminde, 'width: auto' kullanımı ilgili üst öğelerde çalışmaz. Bu durumda, onu 'statik' olarak değiştirmek, genişliğin içindeki içeriğe bağlı olarak değişken olmasına izin verecektir.
Birkaç saatimi, kapsayıcımı içindeki içerik miktarına göre neden ayarlayamadığımı merak ederek geçirdim. Bu yardımcı olur umarım!
Cevap bu! Herkes profesyonellere sadece göreceli konumlandırma için söyler, şöyle bir sorudaki noktayı kaçırır: fark nedir.
—
Bartis Áron
Göreceli konum, normal akışa göre değişir. Bu elemanın göreceli konumu (ofsetlerle), o elemanın normal olarak hareket ettirilmediği takdirde olabileceği konuma bağlıdır.
Matthew Abbott'un gerçekten iyi bir cevabı var.
Mutlak ve bağıl konumlandırılmış öğeler itaat top, left, rightve bottomstatik konumlandırılmış öğeler yok komutları (ofsetler).
Göreceli olarak konumlandırılmış öğeler ofsetleri normalde html'de olacakları yerden hareket ettirir.
Mutlak konumlandırılmış öğeler ofsetleri belgeden veya bir sonraki göreceli olarak konumlandırılmış öğeden DOM ağacının yukarısına taşır.
statik ve göreli konum öznitelikleridir. göreli, birçok kullanım için kullanılır. Biri için değil. Ancak statik ve göreli, Html'nin normal belge akışına zarar vermediğini unutmayın. statik, Html'ye herhangi bir öğe yazdığınızda varsayılan konumdur. Bir öğenin göreceli bir konumu varsa, bu öğe kendi yerine göre konumlandırılabilir. Öğeyi küçük boşluklardan ayarlamak istediğinizde, ilgili konumu kullanın, böylece öğenin göreceli bir konumu varsa ve bir alt öğesi varsa, kenar boşluğu, dolgu vb. eklemenize gerek kalmaz. Burada ebeveynine göre ölçümler yapabiliriz. Alt öğeye genişlik% 10 eklerseniz, bu (genişlik + dolgu) x% 10 anlamına gelir. Ancak ilgili anahtar sözcüğü eklemezseniz, genişlik% 10 elde edersiniz. Bunun dışında akrabanın en önemli kullanımı; herhangi bir öğeyi üstüne yerleştirebilirsiniz.
position: relativeve asla yazınposition: static:)