100%-bar yığılmış yatay bir grafik oluşturmak için HTML ve CSS kullanarak çalışıyorum. Barlar arka plan renkleri ve yüzde genişlikleri ile DİVs kullanarak grafik istediğim değerlere bağlı olarak geliştirmek istiyorum. Ben de bir kılavuz çizgileri grafikte boyunca keyfi bir noktaya işaret etmek istiyorum.

Benim deneyler, zaten barlar yatay css özelliği kaydır atayarak yığın fırsatım oldu: sol. Ancak, bu gerçekten kafa karıştırıcı şekillerde düzeni berbat ki bunu bertaraf etmek istiyorum. Ayrıca, kılavuz çizgileri barlar süzülüyor zaman çok iyi iş gibi görünüyor değil.

CSS konumlandırma ele almak mümkün olması gerektiğini düşünüyorum, ama henüz bunu nasıl yapacağımı bilmiyorum. Pek çok unsur kabın sol üst köşesine göre konumunu belirtmek için mümkün olmak istiyorum. Sorun, bu tür düzenli olarak karşılaştım (hatta bu özel grafik proje dışında) bir yöntem istiyorum:

1. Çapraz tarayıcı (ideal çok fazla tarayıcı kesmek olmadan)
2. Tuhaflıklar modunda çalışır
3. /Mümkün olduğunca temiz, temiz, özelleştirmeleri kolaylaştırmak için
4. Mümkünse Javascript olmadan bitti.

CSS konumlandırma gitmek için yol olduğunu haklısın. Burada hızlı bir çalışma!

position: relative bir öğe göreceli düzenkendisi.Diğer bir deyişle, elemanlar normal akışı içinde dışarı atılır, sonra normal akışından kaldırıldı ve belirttiğiniz ne olursa olsun (üst, sağ, alt, sol ofset. Önemli akışından kaldırıldı çünkü, etrafındaki diğer unsurları ile (eğer bu davranışı istiyorsanız bunun yerine negatif kenar boşlukları kullanın) shift unutmayın.

Ancak, büyük olasılıkla bir eleman kabına göre pozisyon position: absolute ilgileniyorsun. Varsayılan olarak, konteyner tarayıcı penceresi, ama eğer bir üst öğe de vardır position: relative position: absolute set üzerinde, sonra eylem olarak ebeveyn için konumlandırma koordinatları çocuklarına.

Göstermek için:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

Bu örnekte, #box sol üst köşesine #container alt ve üst sol 50px 100px sol köşe olurdu. #container position: relative set var mıydı yoksa #box koordinatları tarayıcı görünüm bağlantı noktası sol üst köşesine göre olacaktır.

Bu yardımcı olur umarım.