Tentu, ini dia artikel mengenai Tutorial CSS #8: Mengatur Posisi Dengan CSS.
Selamat datang kembali di seri tutorial CSS. Di tutorial ketujuh, kita telah membahas bagaimana cara memformat teks dengan CSS. Kali ini, kita akan melangkah lebih jauh dan mempelajari konsep yang sangat penting dalam layouting web: mengatur posisi elemen menggunakan CSS. Bagaimana cara membuat elemen saling tumpang tindih? Bagaimana cara membuat sidebar tetap terlihat saat kita melakukan scrolling? Jawabannya terletak pada properti position dalam CSS.
Properti position menentukan bagaimana sebuah elemen diposisikan dalam dokumen HTML. Ada lima nilai utama untuk properti position:
static(nilai default)relativeabsolutefixedsticky
Mari kita bahas masing-masing nilai ini secara mendalam.
1. position: static
Ini adalah nilai default untuk semua elemen HTML. Elemen dengan position: static akan diposisikan sesuai dengan aliran normal dokumen. Artinya, mereka akan ditempatkan dalam urutan yang mereka muncul dalam kode HTML. Properti seperti top, right, bottom, dan left tidak akan berpengaruh pada elemen dengan position: static.
Contoh sederhana:
<pre><code>
<div style=”border: 1px solid black; margin-bottom: 10px;”>
Ini adalah div pertama (static).
</div>
<div style=”border: 1px solid black;”>
Ini adalah div kedua (static).
</div>
</code></pre>
Kedua div akan ditampilkan secara berurutan dari atas ke bawah.
2. position: relative
Ketika Anda mengatur position sebuah elemen menjadi relative, elemen tersebut masih akan berada dalam aliran normal dokumen, tetapi Anda sekarang bisa menggunakan properti top, right, bottom, dan left untuk menggesernya dari posisi normalnya. Pergeseran ini tidak akan memengaruhi posisi elemen lain di sekitarnya; ruang yang awalnya ditempati oleh elemen tersebut tetap dipertahankan.
Contoh:
<pre><code>
<div style=”border: 1px solid black; width: 200px; height: 100px; margin-bottom: 20px;”>
Ini adalah div pertama.
</div>
<div style=”position: relative; border: 1px solid red; width: 200px; height: 100px; left: 30px; top: 20px;”>
Ini adalah div kedua (relative).
</div>
</code></pre>
Div kedua akan digeser 30 piksel ke kanan dan 20 piksel ke bawah dari posisi normalnya.
3. position: absolute
Elemen dengan position: absolute akan dikeluarkan dari aliran normal dokumen. Ini berarti elemen lain akan berperilaku seolah-olah elemen absolut tidak ada. Elemen absolut akan diposisikan relatif terhadap ancestor positioned (elemen leluhur terdekat yang memiliki position selain static). Jika tidak ada ancestor positioned, elemen absolut akan diposisikan relatif terhadap elemen <html> (root dokumen).
Contoh:
<pre><code>
<div style=”position: relative; border: 1px solid blue; padding: 20px; width: 300px; height: 150px;”>
Ini adalah div container (relative).
<div style=”position: absolute; border: 1px solid green; width: 100px; height: 50px; top: 10px; right: 10px;”>
Ini adalah div absolut.
</div>
</div>
<div style=”border: 1px solid black; margin-top: 20px;”>
Ini adalah div lain (static).
</div>
</code></pre>
Div dengan position: absolute akan diposisikan 10 piksel dari atas dan 10 piksel dari kanan div container (karena div container memiliki position: relative). Perhatikan bahwa div ketiga (static) akan naik ke posisi yang seharusnya ditempati oleh div absolut jika div absolut masih berada dalam aliran normal.
4. position: fixed
Elemen dengan position: fixed juga dikeluarkan dari aliran normal dokumen. Perbedaannya dengan absolute adalah bahwa elemen fixed selalu diposisikan relatif terhadap viewport (jendela browser). Ini berarti elemen fixed akan tetap berada di posisi yang sama meskipun pengguna melakukan scrolling halaman. Properti top, right, bottom, dan left digunakan untuk menentukan posisinya.
Contoh umum penggunaan position: fixed adalah untuk membuat navigasi atau footer yang selalu terlihat.
<pre><code>
<div style=”position: fixed; top: 0; left: 0; width: 100%; background-color: #f0f0f0; text-align: center; padding: 10px;”>
Ini adalah navigasi fixed di bagian atas.
</div>
<div style=”height: 1000px; padding-top: 60px;”>
<!– Konten halaman yang panjang di sini –>
Scroll ke bawah untuk melihat navigasi tetap di atas.
</div>
</code></pre>
Navigasi di atas akan selalu terlihat di bagian atas jendela browser meskipun Anda melakukan scrolling konten di bawahnya.
5. position: sticky
position: sticky adalah hibrida antara relative dan fixed. Elemen sticky akan berperilaku seperti position: relative dalam aliran normal dokumen, hingga mencapai posisi offset (yang ditentukan oleh top, right, bottom, atau left). Pada saat itu, elemen akan “menempel” (become fixed) pada posisi tersebut relatif terhadap viewport atau containing block terdekatnya yang memiliki mekanisme scrolling.
Contoh:
<pre><code>
<div style=”height: 200px; overflow-y: scroll;”>
<h2 style=”position: sticky; top: 0; background-color: lightblue; padding: 10px; margin: 0;”>Bagian A</h2>
<p>Konten untuk bagian A…</p>
<p>Konten untuk bagian A…</p>
<h2 style=”position: sticky; top: 0; background-color: lightgreen; padding: 10px; margin: 0;”>Bagian B</h2>
<p>Konten untuk bagian B…</p>
<p>Konten untuk bagian B…</p>
</div>
</code></pre>
Dalam contoh ini, setiap h2 akan tetap berada di bagian atas area scroll saat konten di bawahnya digulirkan hingga h2 berikutnya mencapai posisi yang sama.
Properti Offset: top, right, bottom, left
Properti top, right, bottom, dan left digunakan untuk menentukan posisi elemen yang memiliki position selain static. Satuan yang umum digunakan adalah piksel (px), persentase (%), em, atau rem.
Mengatur Urutan Tumpukan dengan z-index
Ketika elemen-elemen saling bertumpuk (misalnya karena penggunaan position: absolute atau position: relative dengan offset negatif), properti z-index menentukan urutan tumpukannya. Elemen dengan nilai z-index yang lebih tinggi akan berada di depan elemen dengan nilai yang lebih rendah. Nilai z-index hanya berpengaruh pada elemen yang memiliki position selain static.
Contoh:
<pre><code>
<div style=”position: relative; width: 100px; height: 100px; background-color: red; left: 20px; top: 20px; z-index: 1;”></div>
<div style=”position: absolute; width: 100px; height: 100px; background-color: blue; left: 0; top: 0; z-index: 2;”></div>
</code></pre>
Dalam contoh ini, div berwarna biru akan berada di atas div berwarna merah karena memiliki nilai z-index yang lebih tinggi.
Kesimpulan
Menguasai properti position adalah langkah krusial dalam membangun layout web yang kompleks dan responsif. Dengan memahami perbedaan antara static, relative, absolute, fixed, dan sticky, serta bagaimana properti offset dan z-index bekerja, Anda akan memiliki fleksibilitas yang jauh lebih besar dalam mengatur tata letak elemen di halaman web Anda.
Pada tutorial berikutnya, kita akan membahas tentang model box CSS, yang merupakan fondasi penting lainnya dalam pemahaman layouting. Tetap semangat belajar!
