Tutorial CSS / position CSS: relative, absolute, fixed, dan sticky

Properti position mengubah cara sebuah kotak diposisikan dan bagaimana kotak tersebut berpartisipasi dalam aliran normal. relative mempertahankan ruang aslinya, absolute dan fixed meninggalkan aliran, dan sticky menggabungkan penempatan aliran normal dengan penempelan terbatas saat menggulir.

Bandingkan mode posisi dengan static

Aliran normal adalah tata letak di mana elemen-elemen menempati ruang sesuai dengan aturan pemformatan dokumen. Teks yang mengikuti elemen dengan posisi absolut tidak otomatis bergeser untuk memberi ruang bagi elemen tersebut. Ketika sebuah elemen meninggalkan aliran, konten berikutnya dapat menempati ruang sebelumnya. Cegah tumpang tindih melalui struktur tata letak atau padding yang sesuai. Bandingkan pemposisian dengan display CSS: block, inline, inline-block, dan Menyembunyikan Elemen untuk memahami perbedaan ini.

Offset tergantung pada mode pemposisian. Dengan pemposisian relatif, top: 16px menggeser kotak 16px ke bawah dari posisi aslinya. Dengan pemposisian absolut, top diukur dari kotak acuannya (containing block). Oleh karena itu, angka yang sama mewakili hubungan pemposisian yang berbeda. Lihat MDN: position.

Pertahankan ruang asli dengan relative

relative tidak mengisi ulang penempatan elemen lainnya. Bahkan jika Anda memindahkan satu kartu sedikit ke bawah, posisi awal kartu berikutnya tetap dipertahankan. Jadi mungkin akan menimpa elemen di bawah atau menunjukkan ruang kosong di atas. Jika tujuannya adalah untuk mengubah jarak seluruh dokumen, periksa terlebih dahulu apakah margin, padding, dan gap sudah sesuai daripada top relative.

Penggunaan lain dari relative adalah untuk membuat acuan posisi absolut bagi anak-anak. Jika Anda hanya menulis position: relative pada induk dan tidak menentukan offset, induk itu sendiri tidak akan bergerak dan akan menjadi dasar bagi lencana anak. Menentukan posisi tidak langsung berarti semua elemen akan menumpuk atau keluar dari aliran dokumen.

Temukan blok yang menjadi wadah untuk posisi absolute

Elemen absolute biasanya diposisikan relatif terhadap leluhur terdekat yang bukan statis. Jika Anda memberikan posisi relative pada kartu dan absolute·top·right pada anaknya, itu akan menjadi badge di dalam kartu. Jika tidak ada leluhur yang sesuai, kriteria lebih luar digunakan, yang dapat menyebabkan badge bergerak menuju halaman daripada kartu. Ada kalanya Anda membuat sebuah blok yang juga menyertakan properti seperti transform, jadi Anda tidak boleh hanya menemukan deklarasi posisi dan menghentikannya.

Induk yang seluruh anaknya berposisi absolute tidak menambahkan tinggi anak-anaknya ke tinggi konten dalam aliran normal. Masalah di mana induk tampak memiliki tinggi nol atau batasnya runtuh dapat terjadi meskipun anak-anak terlihat. Jika konten perlu menentukan tinggi induk secara alami, lebih mudah mengelolanya dengan menempatkan anak-anak dalam aliran dan membuat hanya tanda kecil yang tumpang tindih menjadi absolut.

Bandingkan aliran normal dan tanda absolut

Simpan kode di bawah ini sebagai position-flow.html. Tiga bagian terdiri dari elemen depan, target, dan elemen belakang dalam urutan HTML yang sama. Nilai top dan right sebesar 12px pada lencana diukur dari tepi padding-box kartu, dan padding atas diamankan sehingga tidak tumpang tindih dengan badan kartu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-flow.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.flow { border: 2px dashed #789; margin-bottom: 40px; margin-right: 24px; }
 .flow > div { height: 56px; padding: 12px; background: #e8f5de; }
 .flow .target { background: #dceefa; }
 .relative .target { position: relative; top: 16px; left: 20px; }
 .absolute { position: relative; }
 .absolute .target { position: absolute; top: 16px; left: 20px; }
 .card { position: relative; padding: 64px 20px 20px; background: #dceefa; max-width: 600px; }
 .badge { position: absolute; top: 12px; right: 12px; padding: 4px 12px; background: #ffe4b5; }
  </style>
</head>
<body>
<h1>Does the original space remain?</h1>
<h2>static</h2><div class="flow static"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>relative</h2><div class="flow relative"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>absolute</h2><div class="flow absolute"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>Badge inside the card</h2><div class="card"><span class="badge">News</span><p>The badge sits at the top right of the card. Top padding separates it from the text.</p></div>
</body>
</html>

1. Membandingkan posisi elemen berikut di bagian statis dan relatif. Bahkan jika target relatif digeser ke bawah sejauh 16px, ruang penempatan untuk elemen belakang tetap dipertahankan relatif terhadap posisi target asli. Konfirmasi dengan mengubah hanya top menjadi 0 kemudian kembalikan ke 16px.
2. Bagian absolut mengeluarkan target dari aliran dan menempatkan elemen berikutnya segera setelah elemen sebelumnya. Jika Anda mengubah nilai position pada .absolute .target menjadi static, tinggi elemen induk akan bertambah sebesar tinggi target. Setelah perbandingan, kembalikan nilainya ke absolute.
3. Cobalah menghapus hanya position: relative dari .card pada lencana kartu. Setelah memastikan bahwa lencana tidak lagi menempel di sudut kanan atas kartu, kembalikan segera. Kondisi lain tidak berubah.
4. Perpanjang huruf pada lencana dan periksa jarak antara huruf dengan teks utama. absolute tidak secara otomatis mendorong keluar body, jadi jika lencana Anda bisa memiliki beberapa baris, Anda harus mempertimbangkan apakah padding tetap saja cukup. Setelah berlatih, kembalikan ke huruf asli.

Bedakan antara scrolling tetap (fixed) dan lengket (sticky)

fixed biasanya melekat pada viewport, mempertahankan posisinya di layar bahkan saat dokumen digulir. Ini dapat digunakan untuk elemen operasional kecil, seperti tombol atas di kanan bawah layar. Ini tidak mengambil ruang dalam aliran, jadi jika Anda memiliki bilah fixed, pastikan memberikan ruang yang cukup agar tidak menutupi akhir teks tubuh dan objek fokus.

transform pada elemen leluhur dapat menetapkan blok kontainer untuk elemen turunannya yang berposisi fixed, menggantikan referensi viewport biasa. Jika elemen tetap bergerak dengan kotak tertentu, periksa properti elemen leluhur seperti transform dan filter. Contoh ini mengecualikan properti tersebut untuk menunjukkan posisi di viewport.

sticky memerlukan nilai inset selain auto, misalnya top: 0, pada sumbu untuk mengamati efek sticky. Judul tidak tetap di layar dari awal, tetapi tetap pada posisi alirannya sendiri dan menempel ketika mencapai batas atas melalui scrolling. Ketika mencapai akhir induknya, judul bergerak sesuai batasannya dan tidak terus melayang di atas bagian berikutnya.

sticky mengacu pada leluhur terdekat yang memiliki mekanisme gulir. Nilai overflow: auto, scroll, atau hidden dapat membentuk acuan ini, meskipun elemen tersebut tidak benar-benar sedang digulir. Jika area scrolling yang sebenarnya berbeda dari induk yang diharapkan, atau tinggi kontainer dan judul serupa dan tidak ada ruang untuk bergerak, tindakan menempel mungkin tidak terlihat. Daripada hanya menghapus overflow, periksa terlebih dahulu elemen mana yang berbasis scroll.

Perhatikan batas awal sticky dan batas induk

Simpan contoh ini sebagai position-scroll.html. Area pengantar setinggi minimal 320px menjaga heading sticky tetap di bawah bagian atas viewport awal. Bab dan bagian berikutnya memiliki tinggi yang cukup untuk mengamati kapan penyematan dimulai dan kapan batas induk membebaskannya.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-scroll.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
body { margin: 0; padding-bottom: 80px; }
 .intro { min-height: 320px; padding: 24px; background: #eef2f6; }
 .chapter { min-height: 760px; background: #e8f5de; }
 .sticky { position: sticky; top: 0; margin: 0; padding: 16px; background: #dceefa; border-bottom: 2px solid #789; }
 .chapter p { padding: 16px; }
 .tail { min-height: 900px; padding: 24px; background: #fff2df; }
 .fixed { position: fixed; right: 16px; bottom: 16px; padding: 12px; background: #fff; border: 2px solid #145f8f; }
  </style>
</head>
<body>
<div class="intro" id="top"><h1>A heading that sticks while scrolling</h1><p>The heading below starts in normal flow. It sticks when it reaches the top of the screen and remains within its parent at the end of the chapter.</p></div>
<section class="chapter"><h2 class="sticky">Chapter heading</h2><p>This content is inside the chapter. The extra height lets you observe how long its heading remains sticky.</p></section>
<section class="tail"><h2>Another section</h2><p>Check whether the previous chapter's heading stays above this section.</p></section>
<a class="fixed" href="#top">Back to top</a>
</body>
</html>

1. Sebelum menggulir, pastikan judul berada di bawah area pengantar. Turunkan perlahan sehingga judul tetap menempel saat mencapai bagian atas layar. Tautan atas di kanan bawah berada di lokasi layar yang sama sejak awal.
2. Gulir melalui bab dan pergi ke area lain. Judul sticky terdorong ke akhir bab induk, tetapi tautan tetap terlihat. Klik tautan untuk kembali ke area pengantar.
3. Jika Anda hanya mengubah top dari .sticky menjadi auto, tidak ada lagi ambang penempelan pada sumbu vertikal dan itu akan menggulir seperti aliran normal. Setelah dikonfirmasi, kembalikan ke 0.
4. Cukup tambahkan overflow: hidden pada .chapter Anda untuk melihat hasil sticky saat menggulir jendela ketika mekanisme scroll tetangga terdekat diubah. Setelah dibandingkan, hapus deklarasi yang ditambahkan.

Mendiagnosis posisi yang tidak terduga

Jika urutan tumpukan tidak berubah bahkan setelah menentukan posisi, periksa z-index CSS dan Konteks Penumpukan.

1. Pertama, periksa apakah ada ruang yang tersisa. Penempatan elemen di sekitarnya bervariasi tergantung apakah mereka relatif/sticky atau absolut/fixed.
2. Periksa posisi aktual dan nilai top·right·bottom·left yang diterapkan di alat pengembang. Juga periksa aturan dan media query mana yang memiliki prioritas.
3. absolute memeriksa untuk leluhur dasar, dan fixed memeriksa properti leluhur yang mengubah blok kontainer. sticky memeriksa batas, leluhur scroll, tinggi induk, dan margin pergerakan.
4. Jika koordinatnya benar tetapi terhalang, bedakan antara masalah lokasi dan urutan tumpang tindih/pemotongan overflow. Z-index yang besar tidak menyelesaikan semua penghalangan.