Fungsi css position absolute, untuk setel posisi div dalam div

Ini adalah satu diantara beberapa trik css yang belakangan aku baru ngeh cara penerapannya. Nah, position absolute ini lumayan vital dalam desain web modern.

Jadi sebuah div yang ada dalam div, posisi nya dapat diatur dimana saja pada div utama. Misal kalau lihat readmore dan post label/post-footer di halaman utama situs ini;

Penggunaannya kurang lebih seperti dibawah (Ambil contoh kalau mau bikin readmore dan post footer blogger letaknya jadi sedikit nyeleneh);

  .post .readmore {
  position: absolute;
  top: 0;
  right: 0;
  }

Maka ntar readmore akan nempel di kanan atas bagian posting.

.post harus di rujuk, meski yang di setel ini adalah .readmore. Memang cara kerjanya seperti itu.

Seandainya ada div yang kena tutup div lain, perlu menambahkan z-index, untuk mengedepankan div yang ketutup.

 <div class="utama">
    <div class="kiri-bawah-sedang">
    </div>
    <div class="kiri-bawah-kecil">
    </div>
  </div>

Melihat html diatas, seandainya .kiri-bawah-kecil mesti di setel pada posisi yang sama dengan .kiri-bawah-sedang, ada kemungkinan .kiri-bawah-kecil untuk ketutupan, sedang lebih besar dari kecil.

Untuk itu z-index: 1; harus tambahkan ke .kiri-bawah-kecil;

  .kiri-bawah-kecil {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  

Tentang Author

St

Dikirim pada -30 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :