Posisikan elemen relatif ke wadahnya

Saya mencoba membuat grafik batang horizontal 100% bertumpuk menggunakan HTML dan CSS. Saya ingin membuat bilah menggunakan DIVsdengan warna latar belakang dan lebar persentase tergantung pada nilai yang ingin saya grafik. Saya juga ingin memiliki garis kisi untuk menandai posisi sewenang-wenang di sepanjang grafik.

Dalam eksperimen saya, saya sudah mendapatkan bilah untuk ditumpuk secara horizontal dengan menetapkan properti CSS float: left. Namun, saya ingin menghindari itu, karena tampaknya benar-benar mengacaukan tata letak dengan cara yang membingungkan. Selain itu, garis kisi tampaknya tidak berfungsi dengan baik ketika bilah melayang.

Saya pikir bahwa posisi CSS harus dapat menangani ini, tetapi saya belum tahu bagaimana melakukannya. Saya ingin dapat menentukan posisi beberapa elemen relatif terhadap sudut kiri atas wadah mereka. Saya mengalami masalah seperti ini secara teratur (bahkan di luar proyek grafik khusus ini), jadi saya ingin metode yang:

1. Peramban silang (idealnya tanpa terlalu banyak peretasan peramban)
2. Berjalan dalam mode Quirks
3. Sejelas / sebersih mungkin, untuk memfasilitasi kustomisasi
4. Selesai tanpa JavaScript jika memungkinkan.

Anda benar bahwa posisi CSS adalah cara yang harus ditempuh. Berikut ini adalah daftar singkat:

position: relativeakan tata letak elemen relatif terhadap dirinya sendiri. Dengan kata lain, elemen diletakkan dalam aliran normal, lalu dihapus dari aliran normal dan diimbangi dengan nilai apa pun yang Anda tentukan (atas, kanan, bawah, kiri). Penting untuk dicatat bahwa karena dihapus dari aliran, elemen lain di sekitarnya tidak akan bergeser dengannya (gunakan margin negatif sebagai gantinya jika Anda menginginkan perilaku ini).

Namun, Anda kemungkinan besar tertarik dengan position: absoluteyang akan memposisikan elemen relatif terhadap sebuah wadah. Secara default, wadah adalah jendela peramban, tetapi jika elemen induk memiliki position: relativeatau position: absolutemenyetelnya, maka itu akan bertindak sebagai induk untuk penentuan posisi koordinat untuk anak-anaknya.

Untuk menunjukkan:

#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>

Dalam contoh itu, sudut kiri atas #boxakan 100px ke bawah dan 50px kiri dari sudut kiri atas #container. Jika #containertidak position: relativedisetel, koordinat #boxakan relatif ke sudut kiri atas port tampilan browser.

Anda harus secara eksplisit mengatur posisi wadah induk bersama dengan posisi wadah anak. Cara khas untuk melakukan itu adalah sesuatu seperti ini:

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

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

Saya tahu saya terlambat tetapi saya harap ini membantu.

Berikut ini adalah nilai untuk properti posisi.

• statis
• tetap
• relatif
• mutlak

posisi: statis

Ini standar. Ini berarti elemen akan terjadi pada posisi yang biasanya.

#myelem {
    position : static;
}

posisi: diperbaiki

Ini akan mengatur posisi elemen sehubungan dengan jendela browser (viewport). Elemen yang diposisikan tetap akan tetap pada posisinya bahkan ketika halaman bergulir.

(Ideal jika Anda ingin tombol gulir ke atas di sudut kanan bawah halaman).

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

posisi: relatif

Untuk menempatkan elemen di lokasi baru relatif terhadap posisi aslinya.

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

CSS di atas akan memindahkan elemen #myelem 30px ke kiri dan 30px dari atas lokasi sebenarnya.

posisi: absolut

Jika kita ingin elemen ditempatkan pada posisi yang tepat di halaman.

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

CSS di atas akan memposisikan elemen #myelem pada posisi 30px dari atas dan 300px dari kiri di halaman dan itu akan bergulir dengan halaman.

Dan akhirnya...

posisi relatif + absolut

Kita dapat mengatur properti posisi elemen induk ke relatif dan kemudian mengatur properti posisi elemen anak ke absolut . Dengan cara ini kita dapat memposisikan anak relatif terhadap orang tua pada posisi absolut.

#container {
    position : relative;
}

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

Kita dapat melihat pada gambar di atas elemen # div-2 diposisikan di sudut kanan atas di dalam elemen #container .

GitHub: Anda dapat menemukan HTML dari gambar di atas di sini dan CSS di sini .

Semoga tutorial ini membantu.

Posisi absolut memposisikan elemen relatif terhadap leluhur yang diposisikan terdekat. Jadi letakkan position: relativedi wadah, lalu untuk elemen anak, topdan leftakan relatif ke kiri atas wadah selama elemen anak miliki position: absolute. Informasi lebih lanjut tersedia dalam spesifikasi CSS 2.1 .

Jika Anda perlu memposisikan elemen relatif terhadap elemen yang mengandungnya terlebih dahulu, Anda perlu menambahkan position: relative elemen kontainer . Elemen anak yang ingin Anda posisikan relatif ke orang tua harus dimiliki position: absolute . Cara pemosisian absolut bekerja adalah bahwa hal itu dilakukan relatif terhadap elemen induk pertama yang relatif (atau mutlak) diposisikan . Jika tidak ada induk yang diposisikan relatif , elemen akan diposisikan relatif terhadap elemen root (langsung ke elemen HTML).

Jadi jika Anda ingin memposisikan elemen anak Anda di kiri atas wadah induk, Anda harus melakukan ini:

.parent {
  position: relative;
} 

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

Anda akan mendapat manfaat besar dari membaca artikel ini . Semoga ini membantu!