Bir öğeyi kabına göre konumlandırma

HTML ve CSS kullanarak yatay% 100 yığılmış çubuk grafik oluşturmaya çalışıyorum. DIVsÇizmek istediğim değerlere bağlı olarak arka plan renkleri ve yüzde genişliklerini kullanarak çubuklar oluşturmak istiyorum. Ayrıca grafik boyunca rastgele bir konum işaretlemek için bir ızgara çizgileri olmasını istiyorum.

Deneylerimde, çubukları CSS özelliğini atayarak yatay olarak istiflenmeye başladım float: left. Ancak, bundan kaçınmak istiyorum, çünkü düzenle kafa karıştırıcı şekillerde karışıklık var gibi görünüyor. Ayrıca, çubuklar yüzerken ızgara çizgileri çok iyi çalışmıyor gibi görünüyor.

CSS konumlandırmasının bunu yapabilmesi gerektiğini düşünüyorum, ancak henüz nasıl yapılacağını bilmiyorum. Konteynırlarının sol üst köşesine göre birkaç öğenin konumunu belirleyebilmek istiyorum. Düzenli olarak bu tür bir sorunla karşılaşıyorum (bu özel grafik projesinin dışında bile), bu yüzden şöyle bir yöntem istiyorum:

1. Çapraz tarayıcı (ideal olarak çok fazla tarayıcı korsanlığı olmadan)
2. Quirks modunda çalışıyor
3. Özelleştirmeleri kolaylaştırmak için olabildiğince açık / temiz
4. Mümkünse JavaScript olmadan yapılır.

CSS konumlandırmanın doğru yol olduğu konusunda haklısınız. İşte hızlı bir düşüş:

position: relativebir öğeyi kendisine göre düzenler . Başka bir deyişle, elemanlar normal akışta düzenlenir, daha sonra normal akıştan çıkarılır ve belirttiğiniz değerlerle (üst, sağ, alt, sol) dengelenir. Akıştan kaldırıldığından, çevresindeki diğer öğelerin onunla kaymayacağına dikkat etmek önemlidir (bu davranışı istiyorsanız bunun yerine negatif kenar boşlukları kullanın).

Bununla birlikte, büyük olasılıkla position: absolutebir öğeyi bir kaba göre konumlandıracaksınız. Varsayılan olarak, kap tarayıcı penceresidir, ancak bir üst öğenin üzerinde varsa position: relativeveya position: absoluteayarlanmışsa, alt öğeleri için koordinatları konumlandırmak için üst öğe olarak işlev görür.

Göstermek:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

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

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

Bu örnekte, #boxöğesinin sol üst köşesi 100 piksel aşağı ve sol üst köşesinin 50 piksel soludur #container. Eğer #containervar etmedi position: relativeset, koordinatları #boxtarayıcı görünüm penceresinde sol üst köşesine göreli olacaktır.

Ana konteynerin konumunu, alt konteynerin konumu ile birlikte açıkça ayarlamanız gerekir. Bunu yapmanın tipik yolu şudur:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Geç kaldığımı biliyorum ama umarım bu yardımcı olur.

Position özelliğinin değerleri aşağıdadır.

• statik
• sabit
• bağıl
• kesin

pozisyon: statik

Bu varsayılan değerdir. Bu, elemanın normalde olacağı bir konumda olacağı anlamına gelir.

#myelem {
    position : static;
}

pozisyon: sabit

Bu, bir öğenin tarayıcı penceresine (görünüm penceresi) göre konumunu ayarlayacaktır. Sabit konumlandırılmış bir öğe, sayfa kaydırma yapsa bile konumunda kalacaktır.

(Sayfanın sağ alt köşesinde en üste kaydır düğmesi istiyorsanız idealdir).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

pozisyon: göreceli

Bir öğeyi orijinal konumuna göre yeni bir konuma yerleştirmek için.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Yukarıdaki CSS, #myelem öğesini 30px sola ve 30px'i gerçek konumunun üstünden taşıyacaktır.

pozisyon: mutlak

Bir öğenin sayfada tam bir konuma yerleştirilmesini istiyorsak.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Yukarıdaki CSS, #myelem öğesini, sayfanın solundan 30px ve soldan 300px konumda konumlandıracak ve sayfa ile kayacaktır.

Ve sonunda...

konum göreceli + mutlak

Bir üst öğenin position özelliğini göreli olarak ayarlayabilir ve sonra alt öğenin position özelliğini mutlak olarak ayarlayabiliriz . Bu şekilde çocuğu ebeveyne göre mutlak bir pozisyonda konumlandırabiliriz.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Yukarıdaki görüntüde # div-2 öğesinin #container öğesinin sağ üst köşesinde konumlandığını görebiliriz .

GitHub: Yukarıdaki görüntünün HTML'sini burada ve CSS'yi burada bulabilirsiniz .

Umarım bu öğretici yardımcı olur.

Mutlak konumlandırma, bir öğeyi en yakın konumlandırılmış atasına göre konumlandırır. Yani koymak position: relativealt öğeleri için daha sonra kabın üzerine, topve leftüst-sol kadar uzun alt öğeleri olduğu gibi kabın bağlı olacaktır position: absolute. Daha fazla bilgi CSS 2.1 spesifikasyonunda mevcuttur .

Bir öğeyi, içerdiği öğeye göre konumlandırmanız gerekiyorsa position: relative , önce kap öğesine eklemeniz gerekir . Ebeveyne göre nispeten konumlandırmak istediğiniz alt öğenin olması gerekir position: absolute . Mutlak konumlandırmanın çalışma şekli , ilk nispeten (veya kesinlikle) konumlandırılmış üst öğeye göre yapılmasıdır . Durumda orada hiçbir nispeten konumlandırılmış üst öğe göre tavır alacak kök elemanı (doğrudan HTML öğesine).

Dolayısıyla, alt öğenizi üst kabın sol üst köşesine konumlandırmak istiyorsanız, bunu yapmanız gerekir:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Bu makaleyi okumaktan büyük fayda sağlayacaksınız . Bu yardımcı olur umarım!