it-swarm-tr.com

Bir HTML öğesini CSS kullanarak kabına göre konumlandırma

HTML ve CSS kullanarak yatay% 100 yığın çubuk grafik oluşturmaya çalışıyorum. Grafik oluşturmak istediğim değerlere bağlı olarak, arka plan renkleri ve yüzde genişlikleri olan DIV'leri kullanarak çubuklar oluşturmak istiyorum. Ayrıca grafik boyunca rastgele bir pozisyon işaretlemek için bir ızgara çizgileri olmasını istiyorum.

Denememde, CSS özelliğini float: left atayarak yatay olarak istiflenecek çubukları aldım. Bununla birlikte, bu durumdan kaçınmak isterim, çünkü yerleşim planını karıştırmanın yollarını karıştırıyor gibi görünüyor. Ayrıca, çubuklar yüzdüğünde ızgara çizgileri çok iyi çalışmıyor gibi görünüyor.

CSS konumlandırmasının bununla başa çıkabilmesi gerektiğini düşünüyorum ama nasıl yapılacağını henüz bilmiyorum. Konteynırlarının sol üst köşesine göre birkaç elemanın konumunu belirtebilmek istiyorum. Düzenli olarak bu tür bir sorunla karşılaşıyorum (bu özel grafik projesinin dışında bile), bu nedenle:

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

CSS konumlandırmanın gitme yolu olduğu konusunda haklısın. İşte hızlıca koşmak:

position: relative, 'a göre bir eleman düzenler. Başka bir deyişle, elemanlar normal akışta yerleştirilir, daha sonra normal akıştan çıkarılır ve belirttiğiniz değerler (üst, sağ, alt, sol) ile dengelenir. Akıştan kaldırıldığından, etrafındaki 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 bir öğeye konteynere göre konumlanan position: absolute ile ilgileniyorsunuzdur. Varsayılan olarak, kap tarayıcı penceresidir, ancak bir üst öğe üzerinde position: relative veya position: absolute ayarlanmışsa, o zaman çocukları için koordinatları konumlandırma için üst öğe olarak işlev görür.

Göstermek:

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

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

Bu örnekte, #box dosyasının sol üst köşesi, 100 piksel aşağı ve #container sol üst köşesinin 50px solu olacaktır. #containerposition: relative ayarına sahip değilse, #box koordinatları tarayıcı görünümü bağlantı noktasının sol üst köşesine göre olacaktır.

Umarım yardımcı olur.

358
Bryan M.

Ana kabın konumunu, alt kabın konumunu da açıkça ayarlamanız gerekir. Bunu yapmanın tipik yolu böyle bir şey:

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

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

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

Position özelliği için değerler aşağıdadır.

  • statik
  • sabit
  • bağıl
  • kesin

position: statik

Bu varsayılandır. Elemanın normalde olacağı bir konumda ortaya çıkacağı anlamına gelir.

#myelem {
    position : static;
}

konum: sabit

Bu, bir elemanın tarayıcı penceresine (viewport) göre konumunu belirleyecektir. Sabit bir konumlandırılmış öğe, sayfa kaydırıldığında bile konumunda kalır.

(Sayfanın sağ alt köşesindeki yukarı kaydırma düğmesine basmak istiyorsanız idealdir).

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

position: göreceli

Bir elemanı orijinal konumuna göre yeni bir yere yerleştirmek için.

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

Yukarıdaki CSS #myelem elementini 30px sola, 30px'i asıl konumunun üstünden hareket ettirir.

position: mutlak

Bir elemanın sayfada tam olarak yerleştirilmesini istiyorsak.

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

Yukarıdaki CSS #myelem öğesini sayfa başına soldan 30px ve soldan 300px konumda konumlandıracak ve sayfa ile birlikte kayacaktır.

Ve sonunda...

konum göreceli + mutlak

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

#container {
    position : relative;
}

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

 Absolute position of a child element w.r.t. a Relative positioned parent element.

Yukarıdaki resimde # div-2 öğesinin #container öğesinin içinde sağ üst köşede bulunduğunu görebiliriz.

GitHub: Yukarıdaki görüntünün HTML kodunu bulabilirsiniz here ve CSS here .

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

11
yusufshakeel

Mutlak konumlandırma, bir elemanı en yakın konumlandırılan atağına göre konumlandırır. Bu yüzden kabın üzerine position: relative koyun, sonra alt öğeler için top ve left, alt öğeler position: absolute olduğu sürece kabın sol üst kısmına göre olacaktır. Daha fazla bilgi - CSS 2.1 spesifikasyonunda .

3
Jim

Bir öğeyi önce içeren öğeye göre konumlandırmanız gerekirse, önce position: relativekapsayıcı öğeye eklemeniz gerekir. Göreceli olarak üst öğeye konumlandırmak istediğiniz alt öğe sahip olması gerekirposition: absolute. Mutlak konumlandırmanın çalışma şekli, ilk göreceli (veya kesinlikle) konumlandırılmış üst öğeye göre yapılır. Göreceli değil konumlu üst öğe olması durumunda, öğe kök öğe (doğrudan HTML öğesine göre) göre konumlandırılır.

Öyleyse, alt öğenizi ana kabın sol üst kısmına yerleştirmek istiyorsanız, şunu yapmalısınız:

.parent {
  position: relative;
} 

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

Bu makaleyi okumaktan çok faydalanacaksınız. Bu yardımcı olur umarım!

0
Nesha Zoric