Bu ikisi arasındaki farkı tam olarak anladığımdan emin değilim.
Biri neden birini diğerine kullandığımı ve nasıl farklı olduklarını açıklayabilir mi?
Yanıtlar:
toppositionözellik kullanımıyla bir öğeyi değiştirmek içindir .
margin-topöncekine göre elemana olan dış mesafeyi ölçmek içindir.
Ayrıca, top davranış pozisyonu, türüne bağlı olarak farklılık gösterebilir absolute, relativeya da fixed.
Belge akışındaki bir (blok) öğeyi diğer öğelerden uzağa taşımak isterseniz, kenar boşluğunu kullanırsınız. Bu, aşağıdaki öğeleri uzağa / aşağıya iteceği anlamına gelir. Bitişik blok öğelerinin dikey kenar boşluklarının daraldığını unutmayın.
Çevredeki unsurların üzerinde hiçbir etkiye sahip eleman istese, konumlandırma kullanın istiyorum (abs. Rel.) Ve top, bottom, leftveright ayarları.
İle relativekonumlandırma, elementi statik yerleştirilmiş olduğu gibi orijinal yer kaplar. Hiçbir şey olmuyor neden sadece geçiş Yani, eğer bu statickadar relativepozisyon. Oradan, onu çevreleyen unsurların üzerinden geçirebilirsiniz.
absoluteKonumlandırma ile öğeyi (statik) belge akışından tamamen kaldırırsınız, böylece kapladığı alanı serbest bırakır. Ama - Daha sonra özgürce konumlandırmak olabilir göreli etrafına sarılmış bir sonraki en iyi olmayan statik bir konuma elemana. Hiçbiri yoksa, tüm sayfaya sabitlenir.
Marj, öğenin normal sınırını uygular ve genişletir / daraltır, ancak top'u çağırdığınızda, öğenin normal konumunu yok sayarsınız ve belirli bir konuma kaydırırsınız.
Misal:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
Öğenin, kapsayıcısının% 50 yüksekliğinde html'yi görüntülemeye başlayacağı anlamına gelir (yani, "içerik" kelimesini görüntüleyen div, div # some_element öğesinden hemen önce içerdiği div veya html düğümünün% 50 yüksekliğinde görüntülenir), ancak tarayıcının denetçisi (Windows'ta f12 veya Mac'te cmd + alt + i) ve öğenin üzerine fareyi getirin, öğenin sınırlarının vurgulandığını göreceksiniz ve öğenin yeniden konumlandırılmak yerine aşağı itildiğini göreceksiniz.
Öte yandan üstte:
#some_element {top: 50%}
Öğeyi gerçekten yeniden konumlandıracak, yani kabının% 50'sinde görüntülenmeye devam edecek, ancak öğeyi yeniden konumlandıracak, böylece kenarı, içerdiği öğenin% 50'sinden başlayacak. Başka bir deyişle, elemanın kenarları ile kabı arasında bir boşluk olacaktır.
Şerefe!
baytlardan:
"Kenar boşluğu, bir öğenin kutusunun kenarı ile tam kutunun kenarı arasındaki boşluktur, örneğin bir harfin kenar boşluğu." Üst ", öğenin kenar boşluğunu içeren bloklar kutusundan çıkarır, örneğin içindeki kağıt parçası gibi bir karton kutu, ancak kabın kenarına dayanmıyor. "
Anladığım kadarıyla, margin-top eleman üzerinde bir kenar boşluğu yaratır ve top, ötelemede içeren elemanın üst kenarının altındaki elemanın üst kenarını ayarlar.
burada deneyebilirsiniz:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
farkı görmek için üst kısmını margin-top ile değiştirin.